Моя ошибка уже неоднократно устранялась, но ни одно из решений не работает.Ближайший вопрос, который был задан до сих пор, это этот вопрос, заданный пользователем iphonic, но его решение также не работает.
Как и iphonic, я пытался
Поместить элемент script внизу элемента <body>, а также пытался поместить его после *Элемент 1010 *, но до конечного тега </html>, но он все еще не работает.
Использование defer и async флагов в элементе <script>
Добавление type="text/jsx" илиtype="javascript" в элементе <script> избавляет от ошибки, но компонент «Res» не отображается на странице, даже если в консоли нет ошибок.
Вот мой код:
results.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
</head>
<body">
<div id="res" ></div>
<script type="text/jsx" src="../static/bundle.js"></script>
</body>
</html>
results.jsx:
import React from "react";
import ReactDOM from "react-dom";
import "../templates/results.html";
ReactDOM.render(
<div>
<h1>Hello World!</h1>
</div>,
document.getElementById("res")
);
webpack.config.js:
module.exports = {
entry: ["./src/index.jsx"],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
output: {
path: __dirname + "/static",
filename: "bundle.js",
publicPath: "/"
}
};
Вот полная ошибка:
Uncaught Ошибка: целевой контейнер не является элементом DOM.
в инварианте (Reaction-dom.development.js: 55)
в legacyRenderSubtreeIntoContainer (response-dom.development.js: 19532)
в Object.render (Reaction-dom.development.js: 19613)
в eval (index.jsx: 119)
в модуле ../ src / index.jsx (bundle.js: 5336)
в __webpack_require__ (bundle.js: 20)
в eval (index.jsx: 1)
в Object.0 (bundle.js: 5347)
в __webpack_require__ (bundle.js: 20)
в bundle.js: 84