react 引入npm包插件,报错.default is not a constructor

185 阅读1分钟

引入第三方包logicflow报错,源码中又引入了第三方npm包ids,报错如图

image.png

image.png 打印了 require引入没问题,直接 new ids_1()也没问题, 问题是default为什么会找不到

思考如下: 首先为什么会找defult属性? es在编译成cjs时,export default 会编译成 exports.defult,defult会变成exports的一个属性。

引入的npm包logicflow extension 是esm写法编译成cjs,源码写了import Ids from 'ids'; 相当于cjs的默认导入,编译后就会变成一个对象的default属性

而引入的ids也作为我的第三方插件包也是编译好的cjs,模块本身导出就是module.exports={}。 看源码报错中,其中_webpack_require__ 类似于 require,直接返回目标模块的 module.exports 对象,所以去找default属性找不到。

参考原文:

思考:且不说npm包书写方式是否存在问题,经过测试的其他人引用为何没有问题,猜测是自己项目的构建方式

image.png

npm包发布是同时带有cjs和es的,如何让在浏览器环境下不引用npm包的cjs, 概念参考文章 zhuanlan.zhihu.com/p/548202395

项目里
// 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件 mainFields: ['jsnext:main', 'browser', 'main'],

Webpack 会根据 mainFields 的配置去决定优先采用那份代码;Webpack 会按照数组里的顺序去package.json 文件里寻找,只会使用找到的第一个。

现在刚出的npm包的packjson里都不配置jsnext:main了,只配置 "main": "cjs/index.js", "module": "es/index.js", 未找到jsnext:main下面的browser属性默认找main属性,引入cjs文件报错
解决
在mainFields加入了module属性
mainFields: ['jsnext:main', 'module', 'browser', 'main'],

有错误欢迎指正.