记录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 输入阻抗超级大(可以理解为电…

Spring Boot自动装配原理

简介 Spring Boot是一个开源的Java框架,旨在简化Spring应用程序的搭建和开发。它通过自动装配的机制,大大减少了繁琐的配置工作,提高了开发效率。本文将深入探讨Spring Boot的自动装配原理。 自动装配的概述 在传统的Spring框架中&#xf…

八股文学习一(存储)

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

AcWing 5147. 数量 + 5148. 字符串匹配 - 思维+字符串处理

5147. 数量 这个题是之前某场周赛第三题的中间一个步骤 这里我选择使用递归,因为数据范围是1e9,所以当传入的数字位数超过9为时,即可终止递归。这里只需要传入一个参数dep来表示当前数字有多少位就可以。 但是在这之前,我并没有传…

【Node】Mac多版本Node切换

1、查看当前电脑是否安装node node -v或者查看当前电脑通过brew安装的node路径 ls /usr/local/Cellar/node*2、查看可安装的node brew search node3、安装其他版本node 下载需要安装的node版本 brew install node144、brew切换node版本 假设之前的版本是18,需…

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…

linux后台开发面试题

网络 网络的字节序网络知识 tcp三次握手 各种细节 timewait状态tcp 与 udp 区别 概念 适用范围TCP四次挥手讲一下过程,最后一次ack如果客户端没收到怎么办,为什么挥手不能只有三次,为什么time_wait。对于socket编程,accept方法是…

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

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

Flask-SQLAlchemy 快速上手

原文地址: 在底部查看原文(阅读体验更好) 视频地址: BV1Hh4y1j7jM Flask-SQLAlchemy 是 flask 的一个拓展插件,专门添加对 SQLAlchemy 的支持(ORM,关系对象模型)。使用它可以在 flask 中使用对象直接与 SQLAlchemy 进行交互,大大简化了 SQLAlchemy 与 flask 结合使用的过…

HJ3 随机数

描述 明明生成了NN个1到500之间的随机整数。请你删去其中重复的数字&#xff0c;即相同的数字只保留一个&#xff0c;把其余相同的数去掉&#xff0c;然后再把这些数从小到大排序&#xff0c;按照排好的顺序输出。数据范围&#xff1a; 1≤n≤1000 &#xff0c;输入的数字大小…

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

企业形象片宣传片是一种有效的营销工具&#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)…

题目:2833.距离原点最远的点

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2833. 距离原点最远的点 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 遍历字符串&#xff0c;对 L&#xff0c;R 和 _ 字符计数。前两者计数结果之差的绝对值与 _ 字符的计数结果之和即为…

多语言开发(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…