Electron预加载脚本require第三方包提示module not found问题求助

问题详情 #

我在Electron项目中配置了预加载脚本preload.js，main.js相关配置如下：

//...
const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        preload: path.join(__dirname, './preload/preload.js')
    }
});
//...

preload.js代码如下：

const { contextBridge, ipcRenderer } = require('electron');
const qrcode = require('qrcode');

contextBridge.exposeInMainWorld('electronAPI', {
    qrc: qrcode
})

运行时出现如下错误：

Unable to load preload script: F:\project\bluetools\preload\preload.js
Error: module not found: qrcode

我清楚直接暴露第三方模块并非最佳实践，但业务需求需要这么做，且Electron官方文档中也有类似直接暴露的示例（虽不推荐）。想请教为何在preload.js中require任何第三方包都会出现“module not found: xxx”错误？

解决方案 #

• 确认第三方包已本地安装
  执行命令将qrcode安装到项目本地依赖，不要使用全局安装：

  npm install qrcode
  # 或使用yarn：yarn add qrcode
  

• 检查打包工具配置
  如果项目用了Webpack、Vite等打包工具，需保证预加载脚本被正确处理：

  • Webpack：确认预加载脚本作为独立entry配置，且externals未排除目标包；
  • Vite：在配置文件中添加预加载脚本的入口，保证打包输出路径与main.js中引用的路径一致。

• 核对Electron webPreferences配置
  预加载脚本默认在Node.js环境运行，但需确保contextIsolation为true（默认开启），nodeIntegration为false（默认关闭），若自定义过配置，需检查是否破坏了预加载脚本的Node.js能力：

  webPreferences: {
      preload: path.join(__dirname, './preload/preload.js'),
      contextIsolation: true,
      nodeIntegration: false
  }
  

• 确认模块查找路径
  确保项目根目录下存在node_modules文件夹，且目标包安装在该目录下。全局安装的包无法被项目本地的Node.js进程识别，必须安装到项目依赖中。

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