React+Electron+Realm项目引入组件报ES Module require不支持错误

核心原因 #

报错是Electron默认采用CommonJS模块加载规范，但是引入Signin组件后，构建产物触发了对@babel/runtime下ESM格式辅助函数的require调用，CommonJS不支持直接导入ES模块，因此抛出错误。未引入Signin时没有用到对应Babel辅助函数，所以运行正常。

解决方案 #

• 修改Babel配置，强制使用CommonJS格式辅助函数
  找到项目中Babel配置文件（.babelrc、babel.config.js等），修改@babel/plugin-transform-runtime的配置项，关闭ES模块模式：

  {
    "plugins": [
      ["@babel/plugin-transform-runtime", {
        "useESModules": false
      }]
    ]
  }
  

  配置后Babel会统一调用CommonJS版本的辅助函数，不会再加载esm目录下的ES模块文件。

• 调整CRACO构建的externals规则
  如果你使用CRACO修改Create React App构建配置，检查是否将@babel/runtime设为了外部依赖，要求Electron直接从node_modules加载。如果存在该配置，将@babel/runtime从externals列表中移除，让webpack将其打包进最终产物，规避Node侧的模块规范冲突。

• 修正BrowserWindow配置
  在Electron主进程创建窗口的代码中，调整webPreferences参数，关闭不必要的Node集成，避免渲染进程直接调用Node的require加载前端依赖：

  new BrowserWindow({
    // 你的窗口其他配置
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // 用preload脚本处理Node能力调用
    }
  })
  

• 对齐Babel相关依赖版本
  确认项目中@babel/runtime和@babel/plugin-transform-runtime的版本号完全一致，避免版本不匹配导致的加载路径错误。

以上配置修改完成后重新执行构建即可生效。

内容的提问来源于stack exchange，提问作者Valentin Cournée