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

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\n

\n\n

似乎有两个 React 副本，npm ls react返回：

\n\n

\xe2\x94\x94\xe2\x94\x80\xe2\x94\xac myLib@1.0.0 invalid\n  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@16.8.6  extraneous\n

\n\n

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

\n\n

---

\n\n

太长了；

\n\n

这是我的文件树：

\n\n

myLib\n\xe2\x94\x82   package.json\n\xe2\x94\x82   rollup.config.js\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80dist/\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80src/\n\xe2\x94\x82   \xe2\x94\x82   **\n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80workspace\n\xe2\x94\x82   \xe2\x94\x82   package.json\n\xe2\x94\x82   \xe2\x94\x82   index.js\n

\n\n

将 myLib 链接到工作区： I go to myLib/and I doyarn link然后 I go to workspace/and I doyarn link myLib

\n\n

React 和 React-DoM分别是PeerDependencymyLib和devDependencyworkspace/

\n\n

---

\n\n

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

\n\n

\n
• https://reactjs.org/warnings/invalid-hook-call-warning.html
\n
• https://github.com/facebook/react/issues/13991
\n
• https://github.com/facebook/react/issues/15315
\n
• https://github.com/facebook/react/issues/15628
\n

\n

Answer 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-libraryReact 版本与your-app.

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

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

Answer 2

这个问题的解决方案实际上在react doc中有解释：

\n

\n

当您使用 npm link 或等效项时，也会出现此问题。在这种情况下，您的捆绑程序可能会 \xe2\x80\x9csee\xe2\x80\x9d 两个 React \xe2\x80\x94，一个位于应用程序文件夹中，一个位于库文件夹中。npm link ../myapp/node_modules/react假设 myapp 和 mylib 是同级文件夹，一种可能的修复方法是从 mylib运行。这应该使库使用 application\xe2\x80\x99s React 副本。

\n

\n

另一种解决方案是使用lerna（带有提升）。

\n