title: ElectronJS Must use import to load ES Module
body: <p>I am super new to Electron and I am working on a personal learning project.
  I started from the official <a href="https://www.electronjs.org/docs/latest/get-started/quick-start" rel="nofollow noreferrer">Starter Guide</a> with few customizations:</p>
  <ul>
  <li>Using TypeScript</li>
  <li>Using ES6 modules</li>
  <li>Using ESLint</li>
  <li>Moving all <code>tsc</code> output to <code>dist</code> folder</li>
  </ul>
  <p>When I run <code>npm start</code> I get the following error:</p>
  <pre><code>App threw an error during load
  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: F:\Gabriele\DEV\arcanium\dist\main.js
  require() of ES modules is not supported.
  require() of F:\Gabriele\DEV\arcanium\dist\main.js from F:\Gabriele\DEV\arcanium\node_modules\electron\dist\resources\default_app.asar\main.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 F:\Gabriele\DEV\arcanium\dist\main.js to end in .cjs, change the requiring code to use import(), or remove &quot;type&quot;: &quot;module&quot; from F:\Gabriele\DEV\arcanium\package.json.
  
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1096:13)
      at Module.load (internal/modules/cjs/loader.js:935:32)
      at Module._load (internal/modules/cjs/loader.js:776:14)
      at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
      at loadApplicationPackage (F:\Gabriele\DEV\arcanium\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
      at Object.&lt;anonymous&gt; (F:\Gabriele\DEV\arcanium\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)   
      at Module._compile (internal/modules/cjs/loader.js:1078:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
      at Module.load (internal/modules/cjs/loader.js:935:32)
      at Module._load (internal/modules/cjs/loader.js:776:14)
  </code></pre>
  <p>Here is my package.json file</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;main&quot;: &quot;dist/main.js&quot;,
    &quot;type&quot;: &quot;module&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;npm run build &amp;&amp; electron ./dist/main.js&quot;,
      &quot;build&quot;: &quot;tsc &amp;&amp; npm run lint&quot;,
      &quot;lint&quot;: &quot;npx eslint --fix&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@tsconfig/node16&quot;: &quot;^1.0.1&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.28.3&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.28.3&quot;,
      &quot;electron&quot;: &quot;^13.1.7&quot;,
      &quot;eslint&quot;: &quot;^7.30.0&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.24.0&quot;,
      &quot;prettier&quot;: &quot;^2.3.2&quot;,
      &quot;typescript&quot;: &quot;^4.3.5&quot;
    }
  }
  
  </code></pre>
  <p>And my tsconfig.json file</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;extends&quot;: &quot;@tsconfig/node16/tsconfig.json&quot;,
    &quot;compilerOptions&quot;: {
      &quot;target&quot;: &quot;ES6&quot;,
      &quot;module&quot;: &quot;ES6&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;sourceMap&quot;: true,
      &quot;experimentalDecorators&quot;: true,
      &quot;removeComments&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;suppressImplicitAnyIndexErrors&quot;: true,
      &quot;allowJs&quot;: true,
      &quot;outDir&quot;: &quot;dist&quot;
    },
    &quot;include&quot;: [&quot;src&quot;],
    &quot;exclude&quot;: [&quot;node_modules&quot;, &quot;**/*.spec.ts&quot;]
  }
  
  </code></pre>
  <p>And my .eslintrc file</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;env&quot;: {
      &quot;browser&quot;: true,
      &quot;es2021&quot;: true,
      &quot;node&quot;: true
    },
    &quot;extends&quot;: [
      &quot;eslint:recommended&quot;,
      &quot;plugin:react/recommended&quot;,
      &quot;plugin:@typescript-eslint/recommended&quot;
    ],
    &quot;parser&quot;: &quot;@typescript-eslint/parser&quot;,
    &quot;parserOptions&quot;: {
      &quot;ecmaFeatures&quot;: {
        &quot;jsx&quot;: true
      },
      &quot;ecmaVersion&quot;: 12,
      &quot;sourceType&quot;: &quot;module&quot;
    },
    &quot;plugins&quot;: [&quot;react&quot;, &quot;@typescript-eslint&quot;],
    &quot;rules&quot;: {
      &quot;indent&quot;: [&quot;warn&quot;, 2],
      &quot;linebreak-style&quot;: [&quot;warn&quot;, &quot;win&quot;],
      &quot;quotes&quot;: [&quot;warn&quot;, &quot;double&quot;],
      &quot;semi&quot;: [&quot;error&quot;, &quot;always&quot;],
      &quot;curly&quot;: &quot;warn&quot;
    },
    &quot;ignorePatterns&quot;: &quot;dist&quot;
  }
  </code></pre>
  <p>Other than those, I just changed the <code>require</code> statements to <code>import</code> ones in main.js:</p>
  <pre><code>import { app, BrowserWindow } from &quot;electron&quot;;
  import path from &quot;path&quot;;
  
  function createWindow() {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: { preload: path.join(__dirname, &quot;preload.js&quot;) },
    });
  
    win.loadFile(&quot;index.html&quot;);
  }
  
  app.whenReady().then(() =&gt; {
    createWindow();
  
    app.on(&quot;activate&quot;, function () {
      if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
      }
    });
  });
  
  app.on(&quot;window-all-closed&quot;, function () {
    if (process.platform !== &quot;darwin&quot;) {
      app.quit();
    }
  });
  </code></pre>
  <p>My questions are:</p>
  <ol>
  <li><p>I cannot find any <code>require</code> in <code>dist</code> folder, as <code>tsc</code> leaves the <code>main.js</code> file as is, with the <code>import</code> statements. What that error actually means?</p>
  </li>
  <li><p>What I want to achieve, is that I want to write TS code in ES6 fashion and let it be compiled down to anything that just works (I kept <code>ES6</code> in both <code>target</code> and <code>module</code> <code>tsc</code> options), so I guess I should not be forced to compile down to ES5, right? But trying with <code>target</code> as ES5 the error doesn't change. I am totally puzzled...</p>
  </li>
  <li><p>Probably the right answer: am I missing something BIG in this picture?</p>
  </li>
  </ol>