I am attempting to create a React library template. I have the main project that exports some basic React hooks and then an example project enclosed within it that imports the library via "@local/lib": "file:.." in the package.json file.
Both projects depend on React 18.3.1, so they currently both have the dependencies of "react": "^18.3.1" and "react-dom": "^18.3.1". However, this causes an issue where using the hooks causes the following message:
index.js:163 Warning: 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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Looking at that page, it looks like the most likely cause is duplicate React versions, so I updated the example project’s React dependencies to read "react": "file:../node_modules/react" and "react-dom": "file:../node_modules/react-dom", deleted the node_modules folder, and ran another install. The expectation is that this will allow my inner example project to use the same React version as the outer project, fixing the error I’m experiencing.
If I run npm ls react, it does seem like this is the case based on how I’m interpreting the output:
[email protected] /home/ptolemy/webpages/npm/react-mount-effects/example
├─┬ @ptolemy2002/[email protected] -> ./..
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected]
├─┬ [email protected] -> ./../node_modules/react-dom
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped -> ./../node_modules/react
├─┬ [email protected]
│ └── [email protected] deduped -> ./../node_modules/react
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped -> ./../node_modules/react
│ └── [email protected] deduped -> ./../node_modules/react
├─┬ [email protected]
│ └── [email protected] deduped -> ./../node_modules/react
└── [email protected] -> ./../node_modules/react
However, there is no change in behavior. The error is still shown, which means there must still be duplicate React versions if I understand correctly.
Full code for the library I’m developing to test the template can be found at https://github.com/Ptolemy2002/react-mount-effects.
2
There’s an issue in your package.json. Even though you’re not using typescript, having a jsconfig.json file tells your IDE and other tools to type check with jsdoc. Beyond that, there are some errors in your package.json file.
Make sure these versions match:
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0",
"@types/react": ">=18.0.0",
"@types/react-dom": ">=18.0.0"
},
"devDependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0"
}
And then remove these references to your local files. If they’re in your node_modules folder already, there’s really no reason to do this.
"react": "file:../node_modules/"
react-dom": "file:../node_modules/react-dom",
"@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "file:../node_modules/@types/react-dom",V
3