ESM not working with new electron

[adminy]

Describe the bug

Electron now has esm builtin and when I tried it with that I get:

> electron-vite dev --watch

vite v4.4.9 building for development...

watching for file changes...

build started...
✓ 8 modules transformed.
out/main/index.js  22.22 kB
built in 236ms.

build the electron main process successfully

-----

vite v4.4.9 building for development...

watching for file changes...

build started...
✓ 1 modules transformed.
out/preload/index.js  0.27 kB
built in 5ms.

build the electron preload files successfully

-----

dev server running for the electron renderer process at:

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

start electron app...

App threw an error during load
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/adminy/project/out/main/index.js from /Users/adminy/project/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/adminy/project/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Function._load (node:electron/js2c/asar_bundle:2:13377)
    at loadApplicationPackage (/Users/adminy/project/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:121:16)
    at Object.<anonymous> (/Users/adminy/project/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:233:9)
    at Function._load (node:electron/js2c/asar_bundle:2:13377)
    at node:electron/js2c/browser_init:2:122552
    at node:electron/js2c/browser_init:2:122755
    at node:electron/js2c/browser_init:2:122759
    at Function._load (node:electron/js2c/asar_bundle:2:13377)

Electron-Vite Version

^1.0.28

Electron Version

^28.0.0-nightly.20230926

Vite Version

^4.4.9

Validations

• Follow the Code of Conduct.
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[alex8088]

check out https://electron-vite.org/guide/troubleshooting.html#error-err-require-esm-require-of-es-module for more details

[YujiaCheng1996]

I used fix-esm before, but it no longer works after v1.0.28. The official approach works fine.

[ChrisKuBa]

Hi,
I've the same issue and it's quite simple.

create a new project with "type": ""module" (in package.json)
add some mjs / mts hower module files (eg index.mts)
and use electron V28, which supports esm modules
Support Node's ES Modules #21457

electron 28 fails on start with an error, because the whole project is esm based, but the bundle is common js.
electron version before 28 fails with the given error above

Overwriting the electron-vite config parts with "target": "module" also fails, because the outputformat of electron-vite was fixed to node* / commonjs
"The electron vite [main/preload/render] config build target must be node"

This only happens, if a package.json with "target": "module" is within the parent path of the builded files.
And this is the main case while devloping and after build and release the project with a prebundled dist folder.

please enhance ecltron-vite allowto config the output format to output real esm files

[alex8088]

Hi, I've the same issue and it's quite simple.

create a new project with "type": ""module" (in package.json) add some mjs / mts hower module files (eg index.mts) and use electron V28, which supports esm modules Support Node's ES Modules #21457

electron 28 fails on start with an error, because the whole project is esm based, but the bundle is common js. electron version before 28 fails with the given error above

Overwriting the electron-vite config parts with "target": "module" also fails, because the outputformat of electron-vite was fixed to node* / commonjs "The electron vite [main/preload/render] config build target must be node"

This only happens, if a package.json with "target": "module" is within the parent path of the builded files. And this is the main case while devloping and after build and release the project with a prebundled dist folder.

please enhance ecltron-vite allowto config the output format to output real esm files

@ChrisKuBa
electron-vite will supports ESM and is currently under testing, without any configuration changes to support it. If you want the current version to support it, simply set build.lib.formats to esm but not build.target

[Konglomneshued]

Hi, I've the same issue and it's quite simple.
create a new project with "type": ""module" (in package.json) add some mjs / mts hower module files (eg index.mts) and use electron V28, which supports esm modules Support Node's ES Modules #21457
electron 28 fails on start with an error, because the whole project is esm based, but the bundle is common js. electron version before 28 fails with the given error above
Overwriting the electron-vite config parts with "target": "module" also fails, because the outputformat of electron-vite was fixed to node* / commonjs "The electron vite [main/preload/render] config build target must be node"
This only happens, if a package.json with "target": "module" is within the parent path of the builded files. And this is the main case while devloping and after build and release the project with a prebundled dist folder.
please enhance ecltron-vite allowto config the output format to output real esm files

@ChrisKuBa electron-vite will supports ESM and is currently under testing, without any configuration changes to support it. If you want the current version to support it, simply set build.lib.formats to esm but not build.target

Why in library mode? It also needs an entry prop or it's invalid.

[Konglomneshued]

Hi, I've the same issue and it's quite simple.
create a new project with "type": ""module" (in package.json) add some mjs / mts hower module files (eg index.mts) and use electron V28, which supports esm modules Support Node's ES Modules #21457
electron 28 fails on start with an error, because the whole project is esm based, but the bundle is common js. electron version before 28 fails with the given error above
Overwriting the electron-vite config parts with "target": "module" also fails, because the outputformat of electron-vite was fixed to node* / commonjs "The electron vite [main/preload/render] config build target must be node"
This only happens, if a package.json with "target": "module" is within the parent path of the builded files. And this is the main case while devloping and after build and release the project with a prebundled dist folder.
please enhance ecltron-vite allowto config the output format to output real esm files

@ChrisKuBa electron-vite will supports ESM and is currently under testing, without any configuration changes to support it. If you want the current version to support it, simply set build.lib.formats to esm but not build.target

This does not work for me.

import { resolve } from 'path';
import { defineConfig, externalizeDepsPlugin } from 'electron-vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
   main: {
      plugins: [ externalizeDepsPlugin() ],
      build: {
         lib: {
            entry: './src/main/main.ts',
            formats: ['es']
         },
      },
   },
   preload: {
      plugins: [ externalizeDepsPlugin() ],
      build: {
         lib: {
            entry: './src/preload/index.ts',
            formats: ['es']
         },
      },
   },
   renderer: {
      resolve: {
         alias: {
            '@utils': resolve('src/utils'),
            '@globalTypes': resolve('src/types'),
            '@api': resolve('src/api'),
            'renderer': resolve('src/renderer/src'),
            'types': resolve('src/renderer/src/types'),
            'utils': resolve('src/renderer/src/utils'),
            'components': resolve('src/renderer/src/components'),
            'hooks': resolve('src/renderer/src/hooks'),
            'features': resolve('src/renderer/src/features'),
         },
      },
      plugins: [ react() ],
   },
});

A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: require() of ES Module
...
main.js is treated as an ES module file as it is a .js file whose 
nearest parent package.json contains "type": "module" which declares 
all .js files in that package scope as ES modules.

[alex8088]

@Konglomneshued Enabled ESM support. For more details see the ESM limitations document.

Note that preoload script will ignore "type": ""module".So you need to set output.entryFileNames to [name].mjs