npm link引入自定义React库时webpack开发、生产环境分别报错如何解决？

解决步骤 #

1. 修正package.json入口配置 #

你当前package.json中的main字段配置错误，绝对路径无法被正确解析：

- "main": "/build/",
+ "main": "./build/index.js",

该错误直接导致开发模式下Webpack无法定位到库的正确导出模块，触发__webpack_modules__[moduleId] is not a function报错。

2. 修复多React副本冲突 #

Invalid hook call报错的核心原因是npm link机制下，自定义库自身node_modules目录下安装的React和宿主项目的React产生了多实例冲突，你之前修改的externals、别名配置仅作用于库的打包阶段，无法解决npm link场景下的依赖解析优先级问题，执行以下操作即可修复：

1. 进入自定义库的根目录
2. 执行命令强制链接到宿主项目的React依赖：

npm link ../<你的宿主项目本地路径>/node_modules/react
npm link ../<你的宿主项目本地路径>/node_modules/react-dom

如果嫌每次link麻烦，可以直接删除自定义库node_modules下的react、react-dom文件夹，库运行时会自动向上查找宿主项目的对应依赖，也可以解决多实例问题。

3. 补全开发脚本的环境变量 #

你库中package.json的dev脚本缺失NODE_ENV声明，会导致开发打包时的环境变量和宿主不匹配，补全即可：

- "dev": "rm -rf build && webpack --watch",
+ "dev": "rm -rf build && NODE_ENV=development webpack --watch",

内容的提问来源于stack exchange，提问作者x2cheese