纱线链接对app的反应组件库导致“无效钩子调用”错误(多个反应实例)

Question

我有一个与创建-反应-应用程序和反应组件库一起旋转的反应应用程序。我试图将组件库链接到应用程序，以便在本地测试组件。当我尝试使用库中的组件时，会得到以下错误：

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

我已经在互联网(主要是本期)中寻找解决这个问题的方法，并在组件库中找到了几个关于链接应用程序的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链接到相同的结果。

由于使用了alias，我不能使用webpack的create-react-app配置。

以下是一些额外的信息：

应用程序依赖关系：

"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

Answer 1

我建议你也试着把反应联系起来，就像你还没有反应的时候一样。