I'm a JavaScript noob and have been trying to figure out why my web application fails at runtime.
I searched and tried everything I could.
In my build pipeline, I use the npm ci command to install the packages for the release, but it might have been a mistake. As I understand the clean install uses the package-lock.json file and does not install based on the package.json.
I think I updated my Node version in the past, but have not changed my packages, thus my package.json and package-lock.json are the same as earlier.
After a while I added a new package react-markdown and this crashed my pipeline, could not build the application, and locally I could not start it.
I get the following error message during the application start:
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 might break the Rules of Hooks, but I'm pretty sure it's number 1. Different versions of React and React DOM.
I found a peerDependency mismatch in one of the packages. I have "react": "17.0.2", and one of the packages had 18.0 peerDependency, but with downgrading that package the issue seems to be solved. React DOM has the same version.
The npm ls react react-dom command lists only 17.0.2 as expected.
One weird thing I have and do not like is I have a frontend folder in my root, and there I have another package.json, I build the frontend separately.
Working packages:
Good-old-backend-package-lock.json
Good-old-frontend-package.json
Good-old-frontend-package-lock.json
Broken packages:
1- Check the hooks (useEffect, useStates etc..) in your components , there is a hook or more that is/are not called properly .. I think this is the main problem that breaks your app. https://react.dev/warnings/invalid-hook-call-warning
2- check that NodeJs version in compatible with your reactJs version.
3- lastly delete node_modules and package.lock.json nd try to npm install .. then try to figure exactly what dependency is causing the conflict.
4- finally don't say that you are noob , just keep learning.