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

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

报错症状

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

js

复制代码

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

定位问题

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

js

复制代码

`electron/js2c/renderer_init.js:91 Unable to load preload script: C:UsersDesktopProjectsElectron-AppsElectronsrcpreload.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 相关内容如下：

js

复制代码

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

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

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

js

复制代码

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

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

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

原始的头部引入：

js

复制代码

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

修改后的头部引入：

js

复制代码

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 文件内容是不是有语法错误。

js

复制代码

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

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

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

原网址: 访问
创建于: 2023-11-02 11:16:57
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论