Electron App : Unable to load preload script 的解决方式

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

报错症状

今天修改 Electron 项目的一大堆文件后，浏览器控制台发生了以下的报错。

Unable to load preload script: D:\electron\mz\src\main\preload.js

定位问题

百思不得其解。搜索网络也有找到类似的问题反馈：

electron/js2c/renderer_init.js:91 Unable to load preload script: C:\Users\Desktop\Projects\Electron-Apps\Electron\src\preload.js
(anonymous) @ electron/js2c/renderer_init.js:91
electron/js2c/renderer_init.js:91 Error: contextBridge API can only be used when contextIsolation is enabled

但没有找到解决方案。后面思考，判断是路径出错了，以为是 main.js 内的定义路径出错了，但main.js 相关内容如下：

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });
}

检查后发现并没有什么问题，路径没有出错。

会不会是 preload.js内容出错了，其文件内容如下：

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

contextBridge.exposeInMainWorld('electron', {
  ipcRenderer,
  remote,
  shell,
});

也是超级简单。初看没有什么问题。主要是获取到 electron 的一些模块 ipcRenderer、remote、shell，并将其挂载在 window.electron 下，以供 render 进程使用。

但找了好多文档后，仍然没有解决问题。后面脑袋一晃，发现 preload.js 的头部并没有引入 remote 和 shell 模块。

原始的头部引入：

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

修改后的头部引入：

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

保存重刷新后，发现报错没有了，问题得已解决了。

原来是 preload.js 文件内容出错导致渲染进程浏览器端报了 Unable to load preload script 的错。

结论

Electron App 若是报了 Unable to load preload script 类似的错，可以检查 BrowserWindow 初始化时 webPreferences 配置的 preload 对应的 xxxx.js 文件内容是不是有语法错误。

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

若有错误，应该就是这个问题了。

原创不易，感谢阅读，欢迎点赞收藏。