How to use pure ESM packages in Electron

[king514jy]

Describe the bug

Lowdb does not support CommonJS

Error [ERR_REQUIRE_ESM]: require() of ES Module E:\js\editor-client\node_modules.pnpm\registry.npmmirror.com+lowdb@3.0.0\node_modules\lowdb\lib\index.js from E:\js\editor-client\out\main\index.js not supported.
Instead change the require of E:\js\editor-client\node_modules.pnpm\registry.npmmirror.com+lowdb@3.0.0\node_modules\lowdb\lib\index.js in E:\js\editor-client\out\main\index.js to a dynamic import() which is available in all CommonJS modules.
at c._load (node:electron/js2c/asar_bundle:5:13343)
at Object. (E:\js\editor-client\out\main\index.js:6:15)
at c._load (node:electron/js2c/asar_bundle:5:13343)
at loadApplicationPackage (E:\js\editor-client\node_modules.pnpm\registry.npmmirror.com+electron@20.3.1\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
at Object. (E:\js\editor-client\node_modules.pnpm\registry.npmmirror.com+electron@20.3.1\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
at c._load (node:electron/js2c/asar_bundle:5:13343)
at Object. (node:electron/js2c/browser_init:185:3104)
at ./lib/browser/init.ts (node:electron/js2c/browser_init:185:3308)
at webpack_require (node:electron/js2c/browser_init:1:128)
at node:electron/js2c/browser_init:1:1200
at node:electron/js2c/browser_init:1:1267
at c._load (node:electron/js2c/asar_bundle:5:13343)

Electron-Vite Version

1.0.9

Electron Version

20.2.0

Vite Version

3.0.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]

@king514jy 随着nodejs支持ESM，社区发展逐步趋向于ESM，这也是未来的方向。一些开源项目也响应这一趋势，lowdb从3.0版本后只发布ESM版本.但要知道的是Electron并不支持ESM，所以Electron的主进程和预加载脚本的构建标准任然是CJS. 所以就会发生此错误（因为你将其外化了）。对于支持CJS的模块，我们最好将其外化，对于只支持ESM的，我们反而不能外化它，应该让electron-vite将其打包成CJS标准的模块来支持Electron。

As nodejs supports ESM, the community development gradually tends to ESM, which is also the future trend. Some open source projects are also responding to this trend. lowdb has only released esm version since version 3.0. But you need to know that Electron does not support ESM, so the build standard of Electron's main process and preload script is still CJS. So this error occurs (because you externalize it). For modules that support CJS, we'd better externalize it. For modules that only support ESM, we should not externalize it. We should let electron-vite bundle it into a CJS standard module to support Electron.

update to 1.0.11, use externalizeDepsPlugin to automatically externalize dependencies, and exclude lowdb

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

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin({ exclude: ['lowdb'] })],
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('lowdb')) {
              return 'lowdb'
            }
          }
        }
      }
    }
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  // ...
})

[king514jy]

@alex8088 可以了