title: React simple code error: Target container is not a DOM element
body: <p>I am implemmenting <code>react.js</code> in an existing app.</p>
  
  <p>I just added the <code>webpack</code> and a simple <code>App</code> component to check initially how it works, and am getting error:</p>
  
  <pre><code>Target container is not a DOM element.
  </code></pre>
  
  <p>Exactly it says in the console:</p>
  
  <pre><code>Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
  </code></pre>
  
  <p>which leads to the above message as error #200.</p>
  
  <p>The view is just simple:</p>
  
  <pre><code>&lt;script src="~/dist/index.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and the component:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  const App = () =&gt; &lt;div&gt;Hello world!&lt;/div&gt;;
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>The webpack just simple setup:</p>
  
  <pre><code>const path = require("path");
  
  module.exports = {
      entry: {
          index: "./app/index.js"
      },
      output: {
          path: path.resolve(__dirname, "../dist"),
          filename: "[name].js"
      },
      module: {
          rules: [
              {
                  use: {
                      loader: "babel-loader"
                  },
                  test: /\.js$/,
                  exclude: /node_modules/ //excludes node_modules folder from being transpiled by babel. We do this because it's a waste of resources to do so.
              }
          ]
      }
  }
  </code></pre>
  
  <p>What am I missing?</p>