reactjs - 尝试创建一个可共享的 React 组件 - 但未能导入它

Question

我正在尝试共享我通过本地托管的 npm 存储库创建的 React 组件。
为此，我使用 typescript 创建了 React 组件，将其转换为 js 并将生成的代码发布到 repo。但是，当我在现有项目(带有 typescript 的基本 create-react-app 项目)中安装此包并尝试使用该组件时 - 我的应用程序尝试编译它几分钟，但我无法加载该组件。有时，如果我等待几分钟，我会看到此错误 - 尽管该组件已经过测试并且可以正常工作:

Error: Invalid hook call. Hooks can only be called inside of the bodyof a function component. This could happen for one of the followingreasons:

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 See https://reactjs.org/link/invalid-hook-call for tips about how to debugand fix this problem.'

我复制了相同的组件以嵌入到应用程序中，而不是由 npm 安装 - 它有效。我试图将组件剥离到最低限度 - 这仍然需要很长时间。
重现的步骤很简单:
我已经在 github 中共享了该组件:
https://github.com/ymoran00/example-stackoverflow-react
要构建它，您需要运行 npm install 然后 npm run build。
结果将在 lib 文件夹中生成。
然后，您可以进入 lib 文件夹并运行: npm link然后创建一个新的 typescript create-react-app 项目: npx create-react-app my-app --template typescript进入它并运行: npm link login-component这将安装链接的包。
现在转到 App.tsx 并导入包: import LoginContainer from 'login-component/LoginContainer';并在应用程序中使用它: <LoginContainer onLogin={()=> {alert('success')}}/>使用 npm start 运行应用程序。
该应用程序将打开浏览器 - 但不会加载任何内容。它有点卡在构建或其他什么上 - 我不知道那里会发生什么。如果您看一下该组件，您会发现它是带有 Material-UI 的非常基本的组件。

Answer 1

我看的第一个地方是你的package.json文件，因为很可能您正在处理原因#1:

You might have mismatching versions of React and the renderer (such as React DOM)

我看到你包括 react和 react-dom作为组件的依赖项。你应该把这些从 dependencies 移走至 peerDepenedencies .您可能想搬家 @material-ui/core和 @material-ui/icons至 peerDependencies以及。现在 React 与您的组件捆绑在一起，并且您的组件使用自己的 React 版本而不是应用程序中的版本。您希望使用您的组件的项目可以自己包含 React。
有关为什么应该使用 peerDependencies 的更多信息，看这个问题:

What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?