title: Webpack 5 and ESM
body: <p>I think I've read every thread on SO and every related page on the internet on this, everything has some variation of a problem</p>
  <p>I want:</p>
  <ul>
  <li>To use webpack to bundle my web app up</li>
  <li>To use ES Modules within my source js and have them transpiled down for wider browser support</li>
  <li>To use ES Modules within my webpack configuration</li>
  </ul>
  <p>Node 14 allegedly supports ESM, so lets use that</p>
  <p><strong>Setup 1</strong></p>
  <p>I have <code>&quot;type&quot;: &quot;module&quot;</code> in my <code>package.json</code></p>
  <p>then my <code>webpack.config.js</code> looks something like:</p>
  <pre><code>
  import { somethingUseful } from './src/js/useful-things.js';
  
  export default (env, argv) =&gt; {
      return {
          // webpack config here
      };
  }
  </code></pre>
  <p>running <code>&gt; webpack</code> (webpack-cli) I get:</p>
  <pre><code>Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\git\Useroo\webpack.config.js
  require() of ES modules is not supported.
  require() of webpack.config.js from C:\nvm\v14.14.0\node_modules\webpack-cli\lib\groups\resolveConfig.js is an ES module file as it is a .js file whose nearest parent package.json contains &quot;type&quot;: &quot;module&quot; which defines all .js files in that package scope as ES modules.
  Instead rename webpack.config.js to end in .cjs, change the requiring code to use import(), or remove &quot;type&quot;: &quot;module&quot; from package.json.
  
  </code></pre>
  <p>OK, so lets do what the error message says</p>
  <p><strong>Setup 2a</strong></p>
  <p>If I remove <code>&quot;type&quot;: &quot;module&quot;</code> from my <code>package.json</code> I get</p>
  <pre><code>webpack.config.js
  import { somethingUseful } from './src/js/useful-things.js';
  ^^^^^^
  
  SyntaxError: Cannot use import statement outside a module
  </code></pre>
  <p>right.... So lets try the other suggested alternative:</p>
  <p><strong>Setup 2b</strong></p>
  <pre><code>module.exports = async (env, argv) =&gt; {
  
      var somethingUseful = await import('./src/js/useful-things.js');
  
      return {
          // webpack config here
      };
  }
  
  </code></pre>
  <p>I get a segfault.</p>
  <p><code>/c/Program Files/nodejs/webpack: line 14: 14272 Segmentation fault      &quot;$basedir/node&quot; &quot;$basedir/node_modules/webpack/bin/webpack.js&quot; &quot;$@&quot;</code></p>