React Uncaught Error: Target container is not a DOM element

Question

I recently created my webpack config file:

const path = require("path");

const SRC_DIR = path.join(__dirname, "/client/src");
const DIST_DIR = path.join(__dirname, "/client/dist");

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: "bundle.js",
    path: DIST_DIR
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: SRC_DIR,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["react", "es2015"]
        }
      }
    ]
  },
  mode: "development"
};

This one works well and is bundling the jsx file:

import React from "react";
import ReactDOM from "react-dom";

class MainApp extends React.Component {
  render() {
    return (
      <div className="content">
        <h1>Hello World</h1>
      </div>
    );
  }
}

ReactDOM.render(<MainApp />, document.getElementById("app"));

And now inside the html file I included the bundle file with the div id app.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>REACT TEST</title>
  <script src="./bundle.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

When I tried to run this it seems it did not work and I got the error:

Uncaught Error: Target container is not a DOM element.
    at invariant (invariant.js:42)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:17116)
    at Object.render (react-dom.development.js:17195)
    at eval (index.jsx:48)
    at Object../client/src/index.jsx (bundle.js:97)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:84
    at bundle.js:87
invariant   @   invariant.js:42

What am I missing here? Why I am getting this error?

please check : https://github.com/storybooks/storybook/issues/2615 — Bassam, Jun 13 '18 at 09:29
That link discusses the issue, but deals specifically with Webpack. The answer to the question is much more simple and please look at either the answer that this duplicates or the answer given below. — Raydot, Dec 19 '18 at 17:14
Just adding for posterity: I had this issue because my root div had a different id value to the one that react was looking for in `document.getElementById` — Jordan Mackie, Sep 20 '19 at 16:41
also you can use https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event — user2226755, May 12 '20 at 03:52

score 51 · Accepted Answer · answered Jun 13 '18 at 09:30

The way you have it it runs before you even have DOM.

You should include it in the bottom like so:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>REACT TEST</title>
</head>

<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>

</html>

score 11 · Answer 2 · answered Jun 13 '18 at 09:30

You are inserting your React script before the initialization of the container. Make it like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>REACT TEST</title>
</head>

<body>
  <div id="app"></div>
  <script src="./bundle.js"></script>
</body>

</html>

React Uncaught Error: Target container is not a DOM element

2 Answers2