Electron项目中将CommonJS改成使用ES 模块（ESM）语法preload.js加载报错_electron require available in all commonjs modules

问题

将Electron项目原CommonJS语法改成使用ES 模块（ESM）语法，preload.js一直加载不到，报错如下：

VM111 renderer_init:2 Unable to load preload script: D:\Vue\wnpm\electron\preload.js
VM111 renderer_init:2 Error: require() of ES Module D:\Vue\wnpm\electron\preload.js not supported.
Instead change the require of preload.js in null to a dynamic import() which is available in all CommonJS modules.
    at Module._extensions..js (VM53 loader:1424:19)
    at Module.load (VM53 loader:1214:32)
    at Module._load (VM53 loader:1030:12)
    at c._load (VM68 node_init:2:13672)
    at s._load (VM111 renderer_init:2:31018)
    at VM111 renderer_init:2:33087
    at VM111 renderer_init:2:33539
    at ___electron_webpack_init__ (VM111 renderer_init:2:33543)
    at VM111 renderer_init:2:33666
    at BuiltinModule.compileForInternalLoader (VM7 realm:401:7)
1
2
3
4
5
6
7
8
9
10
11
12
13

解决办法

官方文档找到解决方法
https://www.electronjs.org/zh/docs/latest/tutorial/esm#esm-preload-scripts-must-have-the-mjs-extension

将preload.js文件名改成preload.mjs，并且将preload: path.join(__dirname, 'preload.mjs')引用的后缀也要修改，下面是我的代码

// 创建浏览器窗口
mainWindow = new BrowserWindow({
    width: 1920,
    height: 1080,
    minWidth: 1024,
    minHeight: 768,
    titleBarStyle: 'customButtonsOnHover',
    icon: path.join(__dirname, 'assets', 'logo.ico'), // 设置窗口图标
    frame: false,//设置为 false 时可以创建一个无边框窗口 默认值为 true。        
    center: true,//窗口是否在屏幕居中. 默认值为 false
    show: true, //窗口是否在创建时显示。 默认值为 true。
    webPreferences: {
        nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API           
        enableRemoteModule: true, // 可以使用remote方法            
        contextIsolation: true, // 可以使用require方法
        preload: path.join(__dirname, 'preload.mjs')
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

引用其它链接

• 升级至electron@^28.0.0
• 简单地在package.json中添加"type": "module"，
• 把所有.js 文件中的require, module.exports 改成 import from , export 语法。(除了preload.js)
• 注意，esm的import语法中，文件后缀名.js不再能省略，必须显式提供。
• 注意，esm中普通成员要用export { myFunc } 的方式提供。

如果你也要转ESM可以参数链接