记录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插件就好啦
相关推荐
昔人'2 分钟前
html`<mark>`
前端·javascript·html
云中雾丽5 分钟前
Flutter主流的本地存储方案
前端
ss27314 分钟前
手写Spring第7弹:Spring IoC容器深度解析:XML配置的完整指南
java·前端·数据库
前端拿破轮41 分钟前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
止观止1 小时前
XSS 攻击详解:原理、类型与防范策略
前端·xss
用户47949283569151 小时前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
文心快码BaiduComate1 小时前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛1 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
IT_陈寒2 小时前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端