Electron+Vite项目引入ESM-only库触发ERR_REQUIRE_ESM错误求助

核心问题 #

默认@quick-start/electron的主进程构建配置会输出CommonJS格式代码，即便源码用ESM语法，打包后依然是CJS。Electron主进程启动时会用require()加载打包后的CJS文件，进而尝试用require()加载ESM-only的electron-context-menu库，触发ERR_REQUIRE_ESM错误。

具体修复步骤 #

1. 调整Vite主进程构建配置（vite.config.ts） #

修改主进程和预加载脚本的构建规则，强制输出ESM格式：

import { defineConfig } from 'vite';
import electron from 'vite-plugin-electron/simple';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte(),
    electron({
      main: {
        entry: 'electron/main.ts',
        vite: {
          build: {
            outDir: 'dist-electron/main',
            lib: {
              entry: 'electron/main.ts',
              formats: ['es'], // 指定输出ESM格式
              fileName: () => 'main.js',
            },
            rollupOptions: {
              external: ['electron'], // 排除Electron内置模块
            },
          },
        },
      },
      preload: {
        entry: 'electron/preload.ts',
        vite: {
          build: {
            outDir: 'dist-electron/preload',
            lib: {
              entry: 'electron/preload.ts',
              formats: ['es'],
              fileName: () => 'preload.js',
            },
            rollupOptions: {
              external: ['electron'],
            },
          },
        },
      },
      renderer: {},
    }),
  ],
});

2. 更新package.json配置 #

确保项目被识别为ESM，并调整启动命令指向ESM格式的主进程文件：

{
  "type": "module",
  "scripts": {
    "start": "electron dist-electron/main/main.js",
    "build": "vite build && electron-builder"
  }
}

3. 配置electron-builder #

在electron-builder.json5或package.json的build字段中，指定ESM格式的主进程入口：

{
  "appId": "com.your.app",
  "directories": {
    "output": "release"
  },
  "files": [
    "dist",
    "dist-electron/**/*"
  ],
  "main": "dist-electron/main/main.js", // 指向打包后的ESM主进程文件
  "asar": true
}

4. 验证主进程代码语法 #

确保main.ts中使用标准ESM导入：

import { app, BrowserWindow } from 'electron';
import contextMenu from 'electron-context-menu';

contextMenu();

// 其他主进程逻辑...

关键说明 #

• 主进程、预加载脚本的构建输出必须全为ESM，否则Electron会默认用require()加载，触发错误。
• package.json的type: module是核心标识，让Node.js/Electron识别项目为ESM环境。
• electron-builder的main字段必须精准指向打包后的ESM主进程文件，不能用默认的CJS入口。

内容的提问来源于stack exchange，提问作者Ben Bucksch