Я пытаюсь настроить реагирующее веб-приложение с помощью webpack 4, но не могу заставить его работать, я получаю «Uncaught Invariant Violation: целевой контейнер не является элементом DOM». ошибка консоли.
Я провел последние 2 дня, пробуя все, и я прочитал все подобные проблемы здесь в stackoverflow, но у меня ничего не получалось.
Это должна быть глупая ошибка (опечатка или неверная конфигурация), но я ее не вижу, по какой-то причине не удается найти мой html-файл или элемент div с идентификатором приложения.
Структура моего проекта:
Это сгенерированный html плагином html webpack:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
Мой HTML-шаблон:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id='app'></div>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
App.js:
import React from 'react';
const App = () => {
return (
<div>
{'foobar'}
</div>
);
};
export default App;
Конфигурация веб-пакета:
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebPackPlugin({
template: `./src/index.html`,
filename: `index.html`
})
]
};