使用 npm 包中的 React 函数组件时出现无效的钩子调用错误

Question

我有一个 React 函数组件 SimpleComponent，它是从 library 项目中导出并发布在 GitHub 包上的。此包在 consumer 项目中使用，该项目仅呈现 SimpleComponent。如果SimpleComponent 正在使用 React 钩子，则它无法在 consumer 项目中呈现，并且我收到以下与 React 钩子相关的错误：

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

library 项目：https://github.com/joshigaurava/library
consumer 项目：https://github.com/joshigaurava/consumer

这两个项目都使用 React、TypeScript 和 webpack。包括 Package.json、TypeScript 和 webpack 配置。

library 包版本 0.0.1 包含 SimpleComponent 没有 React 钩子，它在 consumer 项目中呈现和运行良好。 (SimpleComponent works)

library 包版本 0.0.2 包含带有 React 钩子的 SimpleComponent，它无法在 consumer 项目中呈现。 (SimpleComponent fails)

我看到许多其他人面临类似的问题，到目前为止我已经尝试了各种方法但没有任何效果：

• 确保在consumer 项目（npm ls react，npm ls react-dom）中存在对 react/react-dom 的单一依赖
• 确保https://reactjs.org/warnings/invalid-hook-call-warning.html 列出的问题均未发生
• 在依赖项中使用 npm file: 时，人们似乎已经使用 npm link 或符号链接解决了这个问题，但在我的情况下，consumer 项目通过使用 npm 包来使用 library 项目，所以这不会申请
• 愚蠢地尝试以不同的方式导出SimpleComponent - 有或没有default 等等。

现在我想知道这是否与 webpack 如何捆绑 library 项目有关。但是我在这个问题上花费了太多时间，任何帮助都将不胜感激。

Answer 1

webpack 配置是问题所在。 React 被捆绑在输出中。对于遇到此问题的任何人，遵循 webpack 配置有助于解决它：

externals = {
  react: {
    root: "React",
    commonjs2: "react",
    commonjs: "react",
    amd: "react",
    umd: "react",
  },
  "react-dom": {
    root: "ReactDOM",
    commonjs2: "react-dom",
    commonjs: "react-dom",
    amd: "react-dom",
    umd: "react-dom",
  },
};