title: React Uncaught Error: Target container is not a DOM element
body: <p>I recently created my webpack config file:</p>
  
  <pre><code>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"
  };
  </code></pre>
  
  <p>This one works well and is bundling the jsx file:</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  class MainApp extends React.Component {
    render() {
      return (
        &lt;div className="content"&gt;
          &lt;h1&gt;Hello World&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;MainApp /&gt;, document.getElementById("app"));
  </code></pre>
  
  <p>And now inside the html file I included the bundle file with the div id app.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;REACT TEST&lt;/title&gt;
    &lt;script src="./bundle.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>When I tried to run this it seems it did not work and I got the error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>What am I missing here? Why I am getting this error?</p>