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

前情提要

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

废话不多说啦 直接上代码:

注释是之前commonjs的写法

typescript 复制代码
//之前的暴露方法
module.exports = CamundaModdleExtension;

//现在的
export default CamundaModdleExtension;


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

改完还需要下两个插件 要不然还会报莫名的错屋

typescript 复制代码
    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插件就好啦
相关推荐
星哥说事5 分钟前
跨平台开源笔记神器,用DeepSeek写笔记 , 效率翻倍
前端
喜欢你,还有大家33 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在36 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi1 小时前
Dokploy安装和部署项目流程
运维·前端
普通网友1 小时前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢1 小时前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端