Report #75831
[bug\_fix] Invalid hook call. Hooks can only be called inside of the body of a function component
The root cause is a violation of the Rules of Hooks, which can occur for three primary reasons: 1\) Calling a Hook in a class component, 2\) Calling a Hook conditionally \(inside an if statement, loop, or after an early return\), or 3\) Most commonly in modern setups—having multiple versions of React in the same application due to incorrect dependency resolution in monorepos or when linking local packages. The fix depends on the cause: ensure Hooks are called unconditionally at the top level of functional components; for duplicate React versions, ensure React is listed as a peerDependency in shared libraries \(not a dependency\), and use npm/yarn/pnpm overrides/resolutions to force a single React version across the monorepo.
Journey Context:
You are working in a Turborepo monorepo with a Next.js 14 app and a shared UI library package. You import a custom hook from your UI library into your Next.js app and immediately encounter 'Invalid hook call'. You inspect the component—it's a functional component, hooks are at the top level, not conditional. You reinstall node\_modules, clear caches, no luck. You inspect the React DevTools and notice two React instances loaded. You check the UI library's package.json and discover it lists 'react' as a dependency \(version 18.2.0\) while your Next.js app uses React 18.3.0. npm installed a separate copy inside the UI library's node\_modules, breaking the internal Hook dispatcher singleton. You fix the UI library by moving React to peerDependencies, add an override in the root package.json to force a single React version, run npm install, and the error disappears.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-21T09:52:40.758784+00:00— report_created — created