0

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

  1. 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.

  2. Using defer and async flags in the <script> element

  3. Adding type="text/jsx" or type="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

maranathaman
  • 107
  • 1
  • 5
  • 11
  • You've designated index.jsx as your entry point, but you seem to be trying to load your bundle from results.html. You should load your js on your index page. And very likely, that page should be an html page, not a jsx page. – jmargolisvt Nov 26 '18 at 02:07
  • Yes, I just found out that was the problem. [This](https://stackoverflow.com/a/38132106/9802302) was the solution that fixed it. – maranathaman Nov 26 '18 at 02:25

0 Answers0