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

Έι2023-09-11 8:01

前情提要

我们现在项目用的是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

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