Invalid hook call (duplicate React in Next.js) Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Next.js: Error: Invalid hook call. Hooks can only be called inside of the body of a function component — Cannot read properties of null (reading 'useContext')

Two copies of React are loaded (or React/ReactDOM versions differ), so hooks can't find the active renderer.

Exact message you may see Invalid hook call. Hooks can only be called inside of the body of a function componentTypeError: Cannot read properties of null (reading 'useContext') Next.jsCannot read properties of null (reading 'useState')Warning: Invalid hook callYou might have more than one copy of React in the same app
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Common with linked/monorepo packages, duplicated node_modules, or a library bundling its own React. Run npm ls react react-dom to see duplicates, dedupe (npm dedupe), align versions, and set resolve.alias / transpilePackages for local packages. Ensure the hook is called inside a component or custom hook.

Common causes

  • Multiple React copies (npm link, monorepo)
  • react and react-dom version mismatch
  • Library with React as a dependency instead of peer
  • Hook called outside a component
  • Different React in app vs packages

⚡ Quick fix

  1. npm ls react react-dom then dedupe
  2. Make libraries use peerDependencies for React
  3. transpilePackages: ["my-ui"] for local packages

Detailed fix by platform

Linux

  1. npm ls react react-dom && npm dedupe

How to diagnose

  1. Count — One React copy?
  2. Versions — Match?
  3. Link — Local package?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

async useEffect — Warning: useEffect must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) (React)async useEffectConflicting app and page file was found — Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx" (Next.js)Conflicting app and p…CORS error calling Next.js API route / route handler — Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler) (Next.js)CORS error calling Ne…ERESOLVE — npm ERR! code ERESOLVE — unable to resolve dependency tree (npm)ERESOLVEERESOLVE: next requires react ^18 (peer dependency conflict) — npm: ERESOLVE unable to resolve dependency tree — Found: react@19.0.0 / Could not resolve dependency: peer react@"^18.2.0" from some-lib (Next.js)ERESOLVE: next requir…Invalid hook call — Error: Invalid hook call. Hooks can only be called inside of the body of a function component. (React)Invalid hook callMaximum update depth — Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. (React)Maximum update depthnext build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…Invalid h…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.