npm Yarn将React组件库链接到应用程序，导致“Invalid Hook call”错误(多个React示例)

k5hmc34c  于 2022-11-14  发布在  Yarn
关注(0)|答案(1)|浏览(115)

我有一个使用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重复了上述步骤，因为它们是两个模块之间的其他重叠React模块，但仍然得到了相同的结果。
我还尝试过从组件库中链接到以下内容：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
npm

1条答案

按热度按时间
fnatzsnv

fnatzsnv1#

我建议你也尝试把react-dom联系起来，如果你还没有的话，就像你把react联系起来一样。

赞(0）分享  回复(0）举报  2022-11-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com