在链接库和工作区应用程序之间链接反应版本答案

【问题标题】：Link react versions between linked library and workspace application在链接库和工作区应用程序之间链接反应版本
【发布时间】：2019-11-30 09:13:59
【问题描述】：

我正在为我常用的组件开发一个 React 库。在我的根文件夹中：

我的汇总配置和包含我的库的 src/ 文件夹。构建时，捆绑文件（ES、CJS 和 UMD）位于 dist/ 文件夹中。
我的工作区：一个简单的parcel 捆绑应用程序，其中有一个独立的package.json。在这个 package.json 中，myLib 位于 dependencies 中，我已链接它。

当我想在工作区中使用 myLib 时，我会像这样导入它：import { Button } from 'myLib'。

在这里，一切似乎都很好。但是在一个组件中我使用了一个钩子并且我有这个错误：

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

React 好像有两个副本，npm ls react 返回：

└─┬ myLib@1.0.0 invalid
  └── react@16.8.6  extraneous

我试图在 myLib/ 和 workspace/ 之间链接 react 和 react-dom node_modules，但它从来没有工作，这个错误仍然存在。

TLDR；

这是我的文件树：

myLib
│   package.json
│   rollup.config.js
│
└───dist/
│
└───src/
│   │   **
│
└───workspace
│   │   package.json
│   │   index.js

要将 myLib 链接到工作区：我转到 myLib/ 并执行 yarn link 然后转到 workspace/ 并执行 yarn link myLib

react 和 react-dom 在myLib中是peerDependencies，在workspace/中是devDependencies

哦，当然我已经看过这里了：

【问题讨论】：

标签： javascript reactjs npm npm-link

【解决方案1】：

这是一个适用于yarn 和npm 的简单解决方案：

cd /your-library/node_modules/react
yarn link
cd /your-library/node_modules/react-dom
yarn link
cd /your-app
yarn link react
yarn link react-dom

确保your-library 具有与your-app 兼容的 React 版本。

或者，如果您使用webpack，只需配置别名：

alias: {
  react: path.resolve(__dirname, './node_modules/react'),
  'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},

【讨论】：

【解决方案2】：

这个问题的解决方法其实在react doc里有说明：

当您使用 npm link 或等效项时，也会出现此问题。在这种情况下，你的打包器可能会“看到”两个 React——一个在应用程序文件夹中，一个在你的库文件夹中。假设 myapp 和 mylib 是同级文件夹，一种可能的解决方法是从 mylib 运行 npm link ../myapp/node_modules/react。这应该使库使用应用程序的 React 副本。

另一种解决方案是使用lerna（与hoisting）。

【讨论】：

这应该是 React Doc 的正确链接：reactjs.org/warnings/invalid-hook-call-warning.html
谢谢@Cog，刚刚修好了

【解决方案3】：

我在这里找到了适合我的答案：How to avoid React loading twice with Webpack when developing

我花了一些时间来解决这个问题，但答案很简单。如果你有多个版本的 React，你必须去你的工作区并链接到 myLib 中的 React 版本。

【讨论】：