title: Minimal React setup without Webpack
body: <p>I followed this answer here:</p>
  
  <blockquote>
    <p><a href="https://stackoverflow.com/a/50066512/11420374">https://stackoverflow.com/a/50066512/11420374</a></p>
  </blockquote>
  
  <p>But after compiling my Browser (Firefox 67) says:</p>
  
  <blockquote>
    <p><strong>SyntaxError: import declarations may only appear at top level of a module</strong></p>
  </blockquote>
  
  <hr>
  
  <p>My app.jsx looks like: </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class Alpha extends React.Component {render() { return &lt;h1&gt;Hello&lt;/h1&gt;; }}
  ReactDOM.render(&lt;Alpha /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>.babelrc:</p>
  
  <pre><code>{
    "presets": ["@babel/preset-react"]
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script src="js/dashboard.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>compiled using babel-cli</p>
  
  <hr>
  
  <p>Why is that? They said that newer browsers support es6 imports.</p>
  
  <p>Tried: </p>
  
  <pre><code>... type="module"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Result: </p>
  
  <blockquote>
    <p><strong>TypeError: Error resolving module specifier: react</strong></p>
  </blockquote>