6

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

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

当我想在工作区中使用 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

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

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 是peerDependencies inmyLib和devDependencies inworkspace/

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

4

3 回答 3

4

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

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

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

于 2020-08-17T08:35:04.333 回答
1

我在这里找到了一个对我有用的答案：How to Avoid React loading two with Webpack when development

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

于 2019-11-19T03:50:27.493 回答
1

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

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具有兼容的 React 版本your-app。

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

alias: {
  react: path.resolve(__dirname, './node_modules/react'),
  'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
},
于 2021-10-05T22:36:57.770 回答