error : Hooks can only be called inside of the body of a function component. 依赖包和主包加载多个react 引发冲突问题

1. 结论: 在依赖包和主包的node-modules中,同时install包含react , react-dom 或者react-redux时,跑测试或者启动的时候,显示如下error。当然出现这个错误的原因还有以下可能:

error : Hooks can only be called inside of the body of a function component. 依赖包和主包加载多个react 引发冲突问题

 

2. 为什么会同时引入多个react,react-dom 引发冲突呢?

1. 删除了package-lock.json文件,导致下载包的顺序和npm仓库地址不确定。

2. 删除了主项目的nodel-modules,或者去拉一个新的项目时,没有存在历史了的react 版本,使这个问题暴露出来。

3. 依赖项目里没有使用 peerDependencies(peerDependencies会提升依赖包的依赖到主项目的依赖中,避免冲突和重复)。

4. 在下载包的时候,如果没有下载 react 先下载了依赖包,依赖包就会根据自己pack.json里的dependencies去下载react,这个react只给自己使用。

5. 由于主项目也需要react,所以就同时install两个react依赖, 依赖包优先使用自己node-modals里的依赖,主包使用自己node-modals里的依赖,运行时或者测试时,产生冲突。

 

3. 解决办法:

1. 添加 package-lock.json

2. 使用 peerDependencies在子项目中, 将主项目会复用到的react react-dom等,都放到peerDependencies中,避免冲突。

3.如果只是在本地跑的话,可以使用 'npm link main/nodal-modals url' 关联到主分支,进行调试,再使用 ‘npm unlink main/nodal-modals url’ 解除关联。

4. 拓展其它

1. npm3开始,采用扁平化依赖的方式,来解决依赖包嵌套太深或者不同包引入react冲突的问题,将所有的依赖都放到node-modules里,但是会存在依赖包结果不稳定,存在非法访问等问题。

2. 使用 pnpm 依赖管理(将包本身和依赖放在同一个node-modules里,依赖地址采用相对地址的方式),解决依赖提升问题,优化性能。

3. 使用 dependency-check 解决npm/yarn依赖提升问题。

 

上一篇:Outlook式样界面菜单和页面控制


下一篇:ts 排除 node_modules 目录检测无效