reactjs - 使用 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
consumer ://github.com/joshigaurava/library项目：https ://github.com/joshigaurava/consumer

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

library包版本0.0.1包含没有 React 钩子，它在项目SimpleComponent中呈现和运行良好。consumer（SimpleComponent作品）

library包版本0.0.2包含SimpleComponentReact 钩子，它无法在consumer项目中呈现。（SimpleComponent失败）

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

• consumer确保项目 ( npm ls react, npm ls react-dom)中对 react/react-dom 有单一依赖
• 确保没有出现https://reactjs.org/warnings/invalid-hook-call-warning.html中列出的问题
• 在依赖项中使用时，人们似乎已经使用npm link或符号链接解决了这个问题npm file:，但在我的情况下，consumer项目正在通过使用librarynpm 包来使用项目，因此这不适用
• SimpleComponent愚蠢地尝试以不同的方式导出- 有或没有default等。

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

标签： reactjsreact-hooksreact-component

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",
  },
};