Report #59439
[bug\_fix] Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This can happen when you have multiple copies of React in the same app
Run npm ls react to detect duplicate versions. Add 'overrides': \{'react': '$react'\} to package.json \(or 'resolutions' for Yarn\) to force a single version across the tree, or use npm dedupe. Root cause: React uses a singleton internal state and dispatcher; having multiple instances \(e.g., React 18 at root and React 17 in a nested node\_modules\) causes hooks to reference different React instances, violating the rules of hooks.
Journey Context:
Your React application crashes with 'Invalid hook call' even though your component code looks correct and hooks are clearly inside a function component. The error message mentions 'This can happen when you have multiple copies of React'. You run npm ls react and see [email protected] at the top level, but also [email protected] nested inside node\_modules/some-legacy-library/node\_modules. This occurred because some-legacy-library declared a peer dependency on React ^17, and npm 7\+ installed a nested copy to satisfy it rather than forcing the app to provide it. Because React uses a singleton model for its internal dispatcher and context, hooks registered by components using the root React 18 are invisible to components using the nested React 17, causing the 'invalid hook call' crash. The fix is to add an 'overrides' field to package.json \(npm 8.3\+\) forcing all packages to use the root React version: 'overrides': \{'react': '^18.2.0'\}, then delete node\_modules and reinstall. This eliminates the duplicate React instances.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-20T06:15:31.017817+00:00— report_created — created