引入本地React库时的Hook冲突问题及相关疑问

1. 模块库的消费者为何会读取其node_modules目录？ #

当你通过file:../libs/modules-lib/dist这种本地文件路径引入模块库时，npm/yarn的依赖解析逻辑会直接读取该本地目录的完整结构——包括其中的node_modules文件夹。

和从npm仓库安装的包不同，本地file协议引入的包不会触发依赖扁平化处理（npm通常会把依赖提升到项目根目录的node_modules以避免重复）。如果你的模块库构建后，dist目录里还保留了自身的node_modules（或是构建过程未正确隔离依赖），父应用加载模块库时，就会加载模块库node_modules内的React实例，和父应用本身的React形成两份独立实例，最终触发Hook调用错误。

2. 为何react和react-dom在最终构建目录的package.json中被列为dependencies而非devDependencies？ #

这通常和模块库的构建流程直接相关：

• 多数库构建工具（如Rollup、Webpack，或是封装的脚手架如create-react-library）默认不会自动修改构建后package.json的依赖分类。如果模块库根目录的package.json中，已将react/react-dom从peerDependencies改为devDependencies，但构建脚本只是简单复制根目录的package.json到dist目录，或是构建工具未配置external选项将React标记为外部依赖，就会导致构建后的package.json错误保留依赖分类，甚至部分工具会把开发依赖误写入生产依赖。
• 此外，若在模块库中执行npm install时未明确指定--save-dev（即便你意图安装为devDependencies），或是某些打包插件会将被打包的依赖自动归入dependencies，也会导致最终dist/package.json的依赖分类不符合预期。

你通过npm link解决问题的核心逻辑，是让模块库直接复用父应用中的React实例，从而避免了多份React共存的冲突。

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