My error has been addressed many times before, but none of the solutions are working. The closest question that has been asked so far is this one asked by user iphonic, but its solution doesn't work either.
Like iphonic, I've tried
Putting the script element at the bottom of the
<body>
element, and I've also tried putting it after the<body>
element but before the ending</html>
tag, but it still doesn't work.Using
defer
andasync
flags in the<script>
elementAdding
type="text/jsx"
ortype="javascript"
in the<script>
element gets rid of the error, but the "Res" component doesn't render on the page, even though there are no errors on the console.
Here is my code:
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: "/"
}
};
Here is the full error:
Uncaught Error: Target container is not a DOM element.
at invariant (react-dom.development.js:55)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:19532)
at Object.render (react-dom.development.js:19613)
at eval (index.jsx:119)
at Module../src/index.jsx (bundle.js:5336)
at __webpack_require__ (bundle.js:20)
at eval (index.jsx:1)
at Object.0 (bundle.js:5347)
at __webpack_require__ (bundle.js:20)
at bundle.js:84