记录vite下使用require报错和解决办法-Toy模板网

这篇具有很好参考价值的文章主要介绍了记录vite下使用require报错和解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前情提要

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

废话不多说啦直接上代码：
记录vite下使用require报错和解决办法,前端
注释是之前commonjs的写法

//之前的暴露方法
module.exports = CamundaModdleExtension;

//现在的
export default CamundaModdleExtension;


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

改完还需要下两个插件要不然还会报莫名的错屋记录vite下使用require报错和解决办法,前端

    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文章来源地址https://www.toymoban.com/news/detail-705708.html