Yarn 将 React 组件库链接到应用程序导致“Invalid Hook call”错误（多个 React 实例）

【问题标题】：Yarn link React component library to app results in "Invalid Hook call" error (multiple React instances)Yarn 将 React 组件库链接到应用程序导致“Invalid Hook call”错误（多个 React 实例）
【发布时间】：2022-03-30 09:53:18
【问题描述】：

我有一个使用 create-react-app 和一个 React 组件库创建的 React 应用程序。我正在尝试将组件库链接到应用程序以在本地测试组件。当我尝试使用库中的组件时，出现错误：

Uncaught Error: 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

我已经在互联网上搜索（主要是 this issue）寻找解决方案，并找到了一些关于链接应用程序的 React 依赖项以及在组件库中使用链接的 React 的建议。这似乎适用于几个人，所以我通过执行以下操作来完成此操作：

在应用中：

cd node_modules/react
yarn link

在图书馆里：

yarn link react
yarn link

返回应用程序：

yarn link {library_name}
yarn start

但是，这会导致完全相同的错误。我对react-dom 和react-bootstrap 重复了上述步骤，因为它们是两者之间的其他重叠反应模块，但仍然得到相同的结果。

我也尝试过以这种方式从组件库：npm link {PATH_TO_APP}/node_modules/react 链接到相同的结果。

由于使用了create-react-app，我无法使用 webpack alias 配置。

这里有一些附加信息：

应用依赖：

"dependencies": {
    "@types/lodash": "^4.14.178",
    "@types/react": "^17.0.37",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^17.0.6",
    "@types/react-router-dom": "^5.3.2",
    "bootstrap": "5.1.3",
    "classnames": "^2.3.1",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-bootstrap": "2.1.0",
    "react-dom": "^17.0.2",
    "react-helmet-async": "^1.2.2",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^5.0.0",
    "sass": "^1.49.0",
    "typescript": "^4.5.5"
},
"devDependencies": {
    "husky": "^7.0.4",
    "lint-staged": "^12.3.1"
},

库依赖：

"peerDependencies": {
    "react": "^17.0.2",
    "react-bootstrap": "2.1.0",
    "react-dom": "^17.0.2"
},
"devDependencies": {
    "@babel/core": "^7.16.0",
    "@storybook/addon-actions": "^6.4.7",
    "@storybook/addon-docs": "^6.4.7",
    "@storybook/addon-essentials": "^6.4.7",
    "@storybook/addon-links": "^6.4.7",
    "@storybook/builder-webpack5": "^6.4.7",
    "@storybook/components": "^6.4.7",
    "@storybook/core-events": "^6.4.7",
    "@storybook/manager-webpack5": "^6.4.7",
    "@storybook/react": "^6.4.7",
    "@storybook/theming": "^6.4.7",
    "@svgr/cli": "^6.0.0",
    "babel-loader": "^8.2.3",
    "husky": ">=6",
    "lint-staged": ">=10",
    "npm-run-all": "^4.1.5",
    "react": "^17.0.2",
    "react-bootstrap": "2.1.0",
    "react-dom": "^17.0.2",
    "ts-loader": "^9.2.6",
    "typescript": "^4.4.4",
    "webpack": "^5.60.0",
    "webpack-cli": "^4.9.1"
},
"dependencies": {}

这是npm ls -g --depth=0 --link=true的结果：

{PATH_TO_NODE}/v16.13.2/lib
├── react-bootstrap@2.1.0 -> {PATH_TO_APP}/node_modules/react-bootstrap
├── react-dom@17.0.2 -> {PATH_TO_APP}/node_modules/react-dom
└── react@17.0.2 -> {PATH_TO_APP}/node_modules/react

这是组件库中npm ls react 的结果。

➜  {COMPONENT_LIBRARY} git:(first-design-system-component) ✗ npm ls react 
{COMPONENT_LIBRARY}@1.0.5 {PATH_TOCOMPONENT_LIBRARY}
├─┬ @react-aria/ssr@3.1.0 extraneous
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @restart/hooks@0.4.5 extraneous
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @restart/ui@0.2.6 extraneous
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/addon-actions@6.4.7
│ ├─┬ @storybook/addons@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/api@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ react-inspector@5.1.1
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/addon-docs@6.4.7
│ ├─┬ @mdx-js/react@1.6.22
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/builder-webpack4@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/core@6.4.7
│ │ ├─┬ @storybook/core-client@6.4.7
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ ├─┬ @storybook/core-server@6.4.7
│ │ │ ├─┬ @storybook/manager-webpack4@6.4.7
│ │ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/preview-web@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/source-loader@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/store@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ react-element-to-jsx-string@14.3.4
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/addon-essentials@6.4.7
│ ├─┬ @storybook/addon-backgrounds@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/addon-controls@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/addon-measure@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/addon-outline@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/addon-toolbars@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/addon-viewport@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/addon-links@6.4.7
│ ├─┬ @storybook/router@6.4.7
│ │ ├─┬ react-router-dom@6.0.2
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ ├─┬ react-router@6.0.2
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/builder-webpack5@6.4.7
│ ├─┬ @storybook/client-api@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/core-common@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/components@6.4.7
│ ├─┬ markdown-to-jsx@7.1.3
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ react-colorful@5.5.0
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ react-popper-tooltip@3.1.1
│ │ ├─┬ react-popper@2.2.5
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ react-syntax-highlighter@13.5.3
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ react-textarea-autosize@8.3.3
│ │ ├── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ ├─┬ use-composed-ref@1.1.0
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ └─┬ use-latest@1.2.0
│ │   ├── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │   └─┬ use-isomorphic-layout-effect@1.1.1
│ │     └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/manager-webpack5@6.4.7
│ ├─┬ @storybook/core-client@6.4.7
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @storybook/ui@6.4.7
│ │ ├─┬ downshift@6.1.7
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ ├─┬ react-draggable@4.4.4
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ ├─┬ react-helmet-async@1.1.2
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/react@6.4.7
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ @storybook/theming@6.4.7
│ ├─┬ @emotion/core@10.1.1
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ @emotion/styled@10.0.27
│ │ ├─┬ @emotion/styled-base@10.0.31
│ │ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ ├─┬ emotion-theming@10.0.27
│ │ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ prop-types-extra@1.1.1 extraneous
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├─┬ react-bootstrap@2.1.0 -> {PATH_TO_APP}/node_modules/react-bootstrap
│ ├─┬ @restart/hooks@0.4.5
│ │ └── react@17.0.2
│ ├─┬ @restart/ui@0.2.6
│ │ ├─┬ @react-aria/ssr@3.1.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ prop-types-extra@1.1.1
│ │ └── react@17.0.2 deduped
│ ├─┬ react-transition-group@4.4.2
│ │ └── react@17.0.2 deduped
│ └─┬ uncontrollable@7.2.1
│   └── react@17.0.2 deduped
├─┬ react-transition-group@4.4.2 extraneous
│ └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react
├── react@17.0.2 -> {PATH_TO_APP}/node_modules/react
└─┬ uncontrollable@7.2.1 extraneous
  └── react@17.0.2 deduped -> {PATH_TO_APP}/node_modules/react

【问题讨论】：

    标签： reactjs npm


    【解决方案1】：

    我建议您也尝试链接 react-dom，就像您还没有使用 react 一样。

    【讨论】：

      猜你喜欢
      • 2023-02-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-27
      • 2020-10-07
      • 2021-03-20
      • 1970-01-01
      • 2022-06-29
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode