Electron项目中将CommonJS改成使用ES 模块(ESM)语法preload.js加载报错

问题

将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:33087at VM111 renderer_init:2:33539at ___electron_webpack_init__ (VM111 renderer_init:2:33543)at VM111 renderer_init:2:33666at BuiltinModule.compileForInternalLoader (VM7 realm:401:7)

在这里插入图片描述

解决办法

官方文档找到解决方法
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,//窗口是否在屏幕居中. 默认值为 falseshow: true, //窗口是否在创建时显示。 默认值为 true。webPreferences: {nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API           enableRemoteModule: true, // 可以使用remote方法            contextIsolation: true, // 可以使用require方法preload: path.join(__dirname, 'preload.mjs')}
});

引用其它链接

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/8123.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3D相机及应用

无论是2D相机和3D相机,在工业应用中都有着不可或缺的作用。3D相机与2D相机的最大区别在于,3D相机可以获取真实世界尺度下的3D信息,而2D相机只能获取像素尺度下的2D平面图像信息。通过3D相机得到的数据,我们可以还原出被测量物体的…

FX110书籍推荐:如何快速成为一名专业股票投资人?

股票投资领域有一本神作《股票交易入门》,它是股票从业人员的入门必备书籍。 关于股票入门的书籍很多,但这本书涉及的知识面最全、实用性最强。从这本书里,我们可以领略到股票交易世界的跌宕起伏而又波澜壮阔的魅力。本书作者 本书的作者是美…

Android studio 打开Device Mirroring方便调试

巧合下发现一个很好用的工具,在平时调试真机的时候在每次run app后都要低头找找手机看看效果。但是,用了AS上的Device Mirroring,你会发现根本不需要再低头点手机,调试方便一万倍啊。 话不多说,上图。直接就可以在电脑…

第二篇【传奇开心果系列】Python深度学习库技术点案例示例:深度解读深度学习在语音助手方面的应用

传奇开心果博文系列 系列博文目录Python深度学习库技术点案例示例系列 博文目录前言一、深度学习在语音助手方面的应用介绍二、语音识别示例代码三、语义理解示例代码四、对话生成示例代码五、个性化服务示例代码六、多模态交互示例代码七、情感识别示例代码八、知识点归纳 系列…

车间移动环保空调降温通风设备

移动环保空调的特点主要体现在以下几个方面: 环保节能:移动环保空调通常采用水冷技术,无需使用化学制冷剂,符合环保要求。同时,其高效节能的设计能有效降低能耗,节约能源。快速降温:移动环保空…

图搜索算法 - 拓扑排序

相关文章: 数据结构–图的概念 图搜索算法 - 深度优先搜索法(DFS) 图搜索算法 - 广度优先搜索法(BFS) 拓扑排序 概念 几乎所有的工程都可分为若干个称作活动的子工程,而这些子工程之间,通常受…

UART、TIMER

UART简介(通用异步收发器,通常称串口) UART,是一种串行、异步、全双工的通信协议,在嵌入式领域应用的非常广泛。 UART作为异步串行通信协议的一种,工作原理是将传输数据的每个二进制位一位接一位地传输。…

JavaScript:正则表达式属于字符串吗-不属于/字符串转正则表达式的两种方法

一、需求描述 js 字符串转正则表达式 二、理解正则表达式属于字符串吗? 正则表达式不属于字符串,它是一种用于匹配、查找和操作文本的模式。正则表达式是一种特殊的语法,用于描述字符串的特征。通过使用正则表达式,可以检查一个字符串是否…

刷题之最爱的城市(卡码网,图论)

最爱的城市 #include<vector> #include<climits> #include<iostream> using namespace std; int path 0; void dfs(vector<vector<int>>& city, vector<bool>& visited, int city2, int startindex, int* result) {if (startinde…

[数据概念|方案实操][最新]数据资产入表4月速递

“ 在各地数据资产变现“热辣滚烫”” 国家数据局全国数据工作会议前后&#xff0c;数据资源“入表”的尝试在各地持续热火朝天地展开&#xff0c;多地实现数据资产入表和利用数据资产进行融资实现“零的突破”。 我们今天就把4月前后的案例做一个小结&#xff0c;之前的案例大…

基于大数据+Hadoop的豆瓣电子图书推荐系统实现

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列文章目录 基于大数…

Pascal Content数据集

如果您想使用Pascal Context数据集&#xff0c;请安装Detail&#xff0c;然后运行以下命令将注释转换为正确的格式。 1.安装Detail 进入项目终端 #即 这是在我自己的项目下直接进行克隆操作&#xff1a; git clone https://github.com/zhanghang1989/detail-api.git $PASCAL…

美联储官员卡什卡利:判断通胀是否停滞为时尚早,利率可能维持较长时间

美联储明尼阿波利斯联邦储备银行行长尼尔卡什卡利近日表示&#xff0c;美联储需要更多数据才能判断通胀是否已经停滞不前&#xff0c;现在就断言通胀进展已经停滞还为时过早。卡什卡利的言论表明&#xff0c;美联储在通胀方面保持谨慎态度&#xff0c;同时强调利率政策可能维持…

连通“数据”,让制造变“聪明”

说起数据智能&#xff0c;你第一时间想到的是什么呢&#xff1f;是科技感十足的智慧城市&#xff1f;还是炫酷的人工智能景象&#xff1f; 数据作为企业的战略资产越来越受到重视&#xff0c;从最初的数据协助业务协同&#xff0c;转化为数据驱动业务&#xff0c;数据驱动运营…

命名空间、C++的输入输出、缺省参数(默认参数)、函数重载

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

【数据库原理及应用】期末复习汇总高校期末真题试卷06

试卷 一、选择题 1&#xff0e; ________是长期存储在计算机内的有组织,可共享的数据集合. A.数据库管理系统 B.数据库系统 C.数据库 D.文件组织 1&#xff0e; 有12个实体类型&#xff0c;并且它们之间存在15个不同的二元联系&#xff0c;其中4个是1:1联系类型&#xff0c;5…

如何恢复回收站中被删除的文件?3个恢复策略,实测有用!

“刚刚一不小心把回收站清空了&#xff0c;大家有什么好用的方法可以帮我恢复回收站中删除的文件吗&#xff1f;快帮帮我吧&#xff01;” 在使用电脑的过程中&#xff0c;我们有时可能会不小心将重要的文件或文件夹删除到回收站&#xff0c;并且随后可能进一步从回收站中彻底删…

羊大师分析,为什么羊奶是孩子的理想饮品?

羊大师分析&#xff0c;为什么羊奶是孩子的理想饮品&#xff1f; 羊奶&#xff0c;作为一种传统的营养饮品&#xff0c;近年来逐渐受到家长们的青睐&#xff0c;成为孩子们的理想饮品。那么&#xff0c;羊大师将为大家讲解&#xff0c;为什么羊奶能够赢得如此多的赞誉&#xf…

Redis 源码安装(CentOS 单机)

序言 本文给大家介绍如何在 CentOS 上&#xff0c;通过 Redis 源码单机部署 Redis 服务。 一、部署流程 通过官网下载源码 # 下载源码 wget https://download.redis.io/redis-stable.tar.gz# 解压源码包 tar -xzvf redis-stable.tar.gz在 linux 中执行以下命令&#xff0c;安…

Unity3D DOTween

简单介绍一下 DOTween 插件的使用。 导入插件 先到 Asset Store 获取 DOTween 插件&#xff0c;然后在 Package Manager 的 My Assets 中搜索&#xff0c;下载并导入插件。 导入后&#xff0c;会自动弹出一个窗口&#xff0c;提示需要先对插件进行配置。 点击上图中的按钮&am…