Build for ESM

[Konglomneshued]

Hello, I'm stuck trying to figure out how to get the out dir files to be in ESM instead of CJS when I run npm run dev.

App threw an error during load
Error [ERR_REQUIRE_ESM]: require() of ES Module
...
node_modules/electron/dist/resources/default_app.asar/main.js not supported
...
out/main/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.

My package.json includes:

"type": "module"

tsconfig.node.json:

...compilerOptions
"module": "NodeNext",
"moduleResolution": "NodeNext",
"target": "ESNext",

tsconfig.web.json:

...compilerOptions
"module": "ESNext",
"moduleResolution": "Bundler",
"target": "ESNext",

electron.vite.config.ts:

...defineConfig
build: {
   rollupOptions: {
      output: {
         esModule: true,
      }
   }
},

[alex8088]

The correct option is rollupOptions.output.format and set to es. If you want to enabled ESM support. For more details see the ESM limitations document

[Konglomneshued]

I am still getting the error

Is this correct?

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

export default defineConfig({
   main: {
      plugins: [ externalizeDepsPlugin() ],
      build: {
         rollupOptions: {
            output: {
               format: 'esm',
            },
         },
      },
   },
   preload: {
      plugins: [externalizeDepsPlugin()],
      build: {
         rollupOptions: {
            output: {
               format: 'esm',
            },
         },
      },
   },
   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() ],
      build: {
         rollupOptions: {
            output: {
               format: 'esm',
            },
         },
      },
   },
});

[alex8088]

es not esm

[Konglomneshued]

After changing it to es I have the same error.

[Yaojian]

It seems that electron-vite forces to use cjs in src/plugins/electron.ts and gives the follow error:

Error: the electron vite main config build lib format must be cjs

[alex8088]

electron-vite 2 will support ESM in Electron. It's under testing.