title: Cannot use JSX with nodejs ESM module loader
body: <p>I attempted to run a simple block of code featuring React "render" method , but the browser didn't display the text.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  ReactDOM.render(&lt;h1&gt;Hello World&lt;/h1&gt;,document.getElementById('root'));
  </code></pre>
  
  <p>I'm using VS Code as editor therefore I typed the "Run and Debug Node.js" command. It came up with the warning below</p>
  
  <pre><code>(node:3004) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
  </code></pre>
  
  <p>Setting "type:module" in the package.json file solved the problem but on the other side another problem arised</p>
  
  <pre><code>(node:18968) ExperimentalWarning: The ESM module loader is experimental.    
  warning.js:32
  SyntaxError: Unexpected token '&lt;'
   at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
   at async link (internal/modules/esm/module_job.js:37:21)
  </code></pre>
  
  <p>That won't allow me to write any tags whatsover. What am I missing and how can I solve it? Below is the index.html file and the file structure</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; React Test&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="root"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/N2hOf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N2hOf.png" alt="The file structure"></a></p>