I have a React app spun up with create-react-app and a React component library. I'm attempting to link the component library to the app to test the components locally. When I attempt to use a component from the library I get the error:
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
I've scoured the internet (mostly this issue) for a solution to this and found several suggestions regarding linking the app's React dependency and using that linked React in the component library. This appeared to work for several people so I accomplished this by doing the following:
In the app:
cd node_modules/react
yarn link
In the library:
yarn link react
yarn link
Back in the app:
yarn link {library_name}
yarn start
However this results in the exact same error. I've repeated the above steps for react-dom as well as react-bootstrap since those are the other overlapping react modules between the two but still got the same results.
I've also tried linking this way from the component library: npm link {PATH_TO_APP}/node_modules/react to the same results.
I cannot use the webpack alias configuration due to using create-react-app.
Here's some additional info:
App dependencies:
"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"
},
Library dependencies:
"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": {}
Here's the result of 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
And here's the result of npm ls react from within the component library.
➜ {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