记录vite下使用require报错和解决办法

前情提要

我们现在项目用的是vite4+react18开发的项目、但是最近公司有个睿智的人让我把webpack中的bpmn组件迁移过来、结果就出现问题啦:因为webpack是commonjs规范、但是vite不是、好像是es吧、可想而知各种报错

废话不多说啦 直接上代码:
在这里插入图片描述
注释是之前commonjs的写法

//之前的暴露方法
module.exports = CamundaModdleExtension;//现在的
export default CamundaModdleExtension;// 之前的引用
module.exports = {__init__: ["camundaModdleExtension"],camundaModdleExtension: ["type", require("./extension")]
};
// 现在的引用
import activitiExtension from './activitiExtension'
export default ['type', activitiExtension]

改完还需要下两个插件 要不然还会报莫名的错屋在这里插入图片描述

    requireTransform({fileRegex: /.js$|.ts$/,}),

commonJs一定要放在最上边、这都是坑。。。。 这两个插件下完开发环境是没问题、生产环境咔咔报错。。。。

"default" is not exported by "node_modules/@babel/runtime/helpers/toConsumableArray.js"imported by "node_modules/react-syntax-highlighter/dist/esm/highlight.js"先是这种
后来又是这种DataView$5 is not a constructor

  1. 第一种就是react-syntax-highlighter跟vite一起用就是报错、大佬们自己找原因吧 我解决方法是直接不用。。。有大佬解决啦可以教我一下
  2. 第二个报错就是打包的时候不要用还上面的两个requireTransform、commonjs插件就好啦

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

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

相关文章

【Spring】手动实现Spring底层机制-问题的引出

🎄欢迎来到边境矢梦的csdn博文🎄 🎄本文主要梳理手动实现Spring底层机制-问题的引出 🎄 🌈我是边境矢梦,一个正在为秋招和算法竞赛做准备的学生🌈 🎆喜欢的朋友可以关注一下&#x1…

工厂设计模式

github:GitHub - QiuliangLee/pattern: 设计模式 概念 根据产品是具体产品还是具体工厂可分为简单工厂模式和工厂方法模式,根据工厂的抽象程度可分为工厂方法模式和抽象工厂模式。 简单工厂模式、工厂方法模式和抽象工厂模式有何区别? - 知…

一点整理

(1) 美国在2010年以后开始流行数字化转型的。 在2010年以前, 2006年社交网络FB “YOU”:在2004-2006 Web2.0热之前,企业是无法直接触达到每个消费者的2006年Amazon电子商务:这个是我瞎凑的,但因…

运算放大器学习笔记

目录 一、基本定理二、基本定义三、负反馈电路四、同向放大电路五、反向放大电路六、差分放大电路 一、基本定理 【电路示意图】 开环放大公式 VOAvo(V-V-) 开环放大倍数(增益)非常大,105 或 106 输入阻抗超级大(可以理解为电…

八股文学习一(存储)

一. 存储 行式存储的原理与特点 对于 OLAP 场景,大多都是对一整行记录进行增删改查操作的,那么行式存储采用以行的行式在磁盘上存储数据就是一个不错的选择。 当查询基于需求字段查询和返回结果时,由于这些字段都埋藏在各行数据中&#xf…

Uniapp学习之从零开始写一个简单的小程序demo(新建页面,通过导航切换页面,发送请求)

先把官网文档摆在这,后面会用到的 [uniapp官网文档]: https://uniapp.dcloud.net.cn/vernacular.html# 一、开发工具准备 1-1 安装HBuilder 按照官方推荐,先装一个HBuilder 下载地址: https://www.dcloud.io/hbuilderx.html1-2 安装微信开…

chrome插件:一个基于webpack + react的chrome 插件项目模板

项目结构 $ tree -L 1 . ├── README.md ├── node_modules # npm依赖 ├── package.json # 详细依赖 ├── pnpm-lock.yaml ├── public # 里边包含dist,安装的时候安装这个目录即可 ├── src …

postgre 12.11单实例安装文档

一 下载 访问https://www.postgresql.org/download/,点击左侧的‘source进行下载,一般选择bz2的安装包。 二 安装 这里安装12.11版本的postgre,数据目录路径为/data/server/pgdata,端口为5432. 2.1 安装依赖包 #安装 yum in…

C++信息学奥赛1171:大整数的因子

该程序是一个寻找能够整除输入数字的最小正整数的程序。下面是代码的逻辑解析&#xff1a; #include <iostream> #include <string> #include <cstring>using namespace std;int main() {string n; // 定义一个字符串变量nint fale 0; // 用于标记是否能…

企业形象片宣传片策划要从哪里展开

企业形象片宣传片是一种有效的营销工具&#xff0c;能够向潜在客户传达企业的核心价值观、品牌形象和产品服务。对于企业来说&#xff0c;一个成功的宣传片可以增加品牌知名度&#xff0c;提高销售额&#xff0c;并建立与客户的良好关系。然而&#xff0c;要想策划一部成功的企…

换行符转换

将\t\n、\n、多个\n\n\n...转换为\n\n。 import pandas as pd import re # 创建一个示例DataFrame data {msgText: [这是示例文本1&#xff0c;包含\t\n换行符,这是示例文本2&#xff0c;包含\n\n多个\n换行符,这是示例文本3&#xff0c;没有换行符]} df pd.DataFrame(data)…

多语言开发(vant

参考&#xff1a;https://blog.csdn.net/qq_44649801/article/details/131878128?spm1001.2014.3001.5506 一、抛出字段对象A export default { } 二、引入汇总文件&#xff0c;&#xff08;主要的是 模块分割 汇总&#xff0c;对A 等的处理 export default { A&#xff0c;B,…

Redis RedLock算法和底层源码分析

Redlock红锁算法 官网地址&#xff1a;Distributed Locks with Redis | Redis 为什么要使用RedLock&#xff1f; 解释&#xff1a; 线程 1 首先获取锁成功&#xff0c;将键值对写入 redis 的 master 节点&#xff0c;在 redis 将该键值对同步到 slave 节点之前&#xff0c;mas…

使用 CSS 伪类的attr() 展示 tooltip

效果图: 使用场景: 使用React渲染后台返回的数据, 遍历以列表的形式展示, 可能简要字段内容需要鼠标放上去才显示的 可以借助DOM的自定义属性和CSS伪类的attr来实现 所有代码: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-…

Navicat导入Excel数据顺序变了

项目场景&#xff1a; Navicat导入Excel数据 问题描述 从Excel表格中导入数据到数据库中。但是&#xff0c;在导入的过程中&#xff0c;我们常会发现数据顺序出现了问题&#xff0c;导致数据错位&#xff0c;给数据的处理带来了极大的麻烦。 原因分析&#xff1a; 这个问题的…

vue2.X 中使用 echarts5.4.0实现项目进度甘特图

vue2.X 中使用 echarts5.4.0实现项目进度甘特图 效果图&#xff1a; 左侧都是名称&#xff0c;上面是时间&#xff0c;当中的内容是日志内容 组件&#xff1a; gantt.vue <template><div id"main" style"width: 100%; height: 100%"></…

Ansys Zemax | 用于照明设计中的光源

本课程提供照明系统中光源的介绍&#xff0c;作为照明系统光源的信息中心。本课是照明学习路径的第二课。在这一课中&#xff0c;将描述照明系统中的各种光源类型以及如何这些使用光源。光源是照明系统的起点和支点&#xff0c;可以说是照明设计中最关键的部分。 简介&#xff…

华为云云耀云服务器L实例评测|基于云耀云服务器部署Samba服务

本实验将使用华为云云耀云服务器L实例&#xff0c;使用CentOS 7.9系统&#xff0c;搭建部署Samba服务器&#xff0c;并在本地Windows端进行访问。 文章目录 1、samba介绍2、环境准备3、安装samba软件包4、修改smb.conf配置文件5、添加访问samba的用户6、Windows下访问Samba服务…

使用 multiprocessing 多进程处理批量数据

示例代码 import multiprocessingdef process_data(data):# 这里是处理单个数据的过程return data * 2# 待处理的数据 data [1, 2, 3, 4, 5]def normal_func():# 普通处理方式result []for obj in data:result.append(process_data(obj)return resultdef parallel_func():# …

【FAQ】视频监控管理平台/视频汇聚平台EasyCVR安全检查相关问题及解决方法3.0

智能视频监控系统/视频云存储/集中存储/视频汇聚平台EasyCVR具备视频融合汇聚能力&#xff0c;作为安防视频监控综合管理平台&#xff0c;它支持多协议接入、多格式视频流分发&#xff0c;视频监控综合管理平台EasyCVR支持海量视频汇聚管理&#xff0c;可应用在多样化的场景上&…