Rollup 组件构建后“无效的钩子调用”，并导入到另一个 React 项目中

Question

我在 Rollup 方面遇到了一些奇怪的问题。如果有人比我更精通，请提供任何帮助，我们将不胜感激！

首先，我需要说我在这里看到了一些类似的问题：

• 使用 rollup.js 创建 React 库时出现错误 null（读取“useState”）
• https://github.com/facebook/react/issues/14721

然而，即使在尝试了上述建议的修复之后，我仍然遇到相同的问题，并且我无法指出我缺少的确切问题。我希望你们中的一位能给我指出正确的方向。

我还决定为我的完整项目创建一个公共 github 存储库：

https://github.com/FredM7/test-button

我试图让事情变得非常简单。现在我什至还没有尝试导入CSS，我只是希望React能够像我期望的那样与Rollup一起工作。

让我在这里解释一下我总结的问题：

• 当我获取上述项目并在我的计算机上本地构建它时，它构建成功。我看到 bing 创建了一个

  /dist

  文件夹

到目前为止，所有这些对我来说都是正确的。我很高兴。

• 现在，我还需要提及的是，我正在以这种方式将其安装在我的其他项目上，在我的

  package.json

  文件中：

"@myorg/test-button": "file:/Users/fred/Documents/Development/test/test-button/dist",

你现在可以看到，我使用

file:/

，这样我就可以在本地开发，而不是部署到NPMJS，这会花费太多时间。顺便说一下，将其解聚到 NPMJS 后，我得到了相同的结果，没有区别。 （我在某处读到过有关 React 符号链接、npm 链接或其他内容的内容，但我怀疑这就是问题所在？无论如何。）

• 在另一个 React 项目中，我会这样使用它：

import React from "react";
import { ReactPaymentButton } from "@myorg/test-button";

export const HomePage = () => {
  return (
    <div className="pt-4">
      <ReactPaymentButton label="Hello" />
    </div>
  );
};

如果我的付款按钮不使用

useEffect

，则按钮会在我的其他项目中正常导入，如此处所示，我们会看到“Hello”，即该按钮。

• 然而，当我在

  test-button

  项目/存储库（如上面我的 GitHub 存储库所示）上添加 useEffect 时，我收到以下错误：

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

此时我不确定我缺少什么，其他人也许知道我可能缺少什么吗？

任何帮助将不胜感激！如果我可以提供其他任何有帮助的信息，请告诉我！有什么意见欢迎留言！谢谢

Answer 1

如错误消息所示，您在这里有重复的反应副本。一个来自导出测试按钮组件的项目（我们称之为库），另一个来自导入测试按钮组件的项目（我们称之为应用程序）。

要解决此问题，您需要告诉您的库使用与您的应用程序使用的相同的 React 副本。

npm link

是最简单的方法。请删除用于安装库的文件协议并按照以下步骤操作

1. 在您的图书馆内，执行

   npm link

2. 在您的图书馆内执行

   npm link ${path_to_Application}/node_modules/react

3. 在您的应用程序中，执行

   npm link ${name of your Library ('name' field from package.json)}

这应该可以解决您的问题。