Next.js 15.1.3 build fails with "Cannot read properties of null (reading ‘useContext’)": fix for brand-new projects

A fresh Next.js 15 app should not crash during build, yet this issue appears immediately in some new projects using React 19.0.0: TypeError: Cannot read properties of null (reading 'useContext'). The failure usually is not caused by your app code. It is typically caused by a dependency mismatch, duplicated React installation, or a package in the tree resolving to the wrong React runtime during SSR/build compilation.

Understanding the Root Cause

This error happens when code calls useContext from a React instance that is not the one actually rendering the component tree, or when a package expects a different internal React/export shape than the one installed. In a brand-new Next.js app, the most common causes are:

• Multiple React copies in node_modules. One package imports one React instance while Next renders with another.
• Version skew between react, react-dom, and next. Even a small mismatch can break hooks during build.
• Lockfile or package manager resolution issues, especially when switching between npm, pnpm, and yarn.
• Cached build artifacts from a previous install, leaving Next to compile against stale dependency output.
• Third-party packages or templates that pull in older React peer dependencies and force an invalid resolution tree.

Why does the message specifically mention useContext? Hooks like useContext are resolved through React’s current dispatcher. If React is loaded incorrectly, or if the module graph contains incompatible hook internals, the dispatcher can become null during build-time rendering. That makes React fail with the exact error shown.

In short: this is usually a package resolution problem, not a bug in your first page component.

Step-by-Step Solution

Use the following sequence to make sure Next.js, react, and react-dom resolve cleanly.

1. Verify exact dependency versions

Open package.json and make sure the core packages are aligned.

{
  "dependencies": {
    "next": "15.1.3",
    "react": "19.0.0",
    "react-dom": "19.0.0"
  }
}

If your project has different versions, update them first.

2. Remove installed modules and lockfiles

Delete all generated install artifacts so the dependency tree can be rebuilt from scratch.

rm -rf node_modules .next package-lock.json yarn.lock pnpm-lock.yaml

On Windows PowerShell:

Remove-Item -Recurse -Force node_modules, .next
Remove-Item -Force package-lock.json, yarn.lock, pnpm-lock.yaml -ErrorAction SilentlyContinue

3. Reinstall using a single package manager

Do not mix npm, yarn, and pnpm in the same repo.

npm install

Then run:

npm run build

4. Check for duplicate React versions

If the build still fails, inspect whether more than one React version is installed.

npm ls react react-dom

You want a clean tree where everything points to the same React 19.0.0 and react-dom 19.0.0. If you see nested or conflicting versions, that is the real problem.

5. Force a single React version if needed

If a dependency pulls the wrong React version, pin it through package manager overrides.

For npm:

{
  "overrides": {
    "react": "19.0.0",
    "react-dom": "19.0.0"
  }
}

Then reinstall:

rm -rf node_modules package-lock.json
npm install
npm run build

6. Make sure no client-only package is imported in a server path

In App Router projects, importing a package that assumes a browser-only runtime into a Server Component can surface confusing hook failures. If you added any library beyond the default starter, move that code into a Client Component.

'use client'

import { useContext } from 'react'

export default function Example() {
  return <div>Client component</div>
}

This does not fix a broken React install, but it does eliminate one common source of misleading build errors.

7. Upgrade to the latest compatible patch release

If the issue reproduces in a clean project with no extra packages, test the latest patch version of Next 15 and reinstall. Framework-level fixes for React 19 integration often land in patch releases.

npm install next@latest react@latest react-dom@latest

Then rebuild:

npm run build

If you must stay on the original version for reproducibility, document that the failure is version-specific and verify whether the newer patch removes it.

8. Create a fresh control project to isolate the environment

This confirms whether the bug belongs to the repo or your machine/toolchain.

npx create-next-app@latest test-next-app
cd test-next-app
npm run build

If the clean control project succeeds while the failing repo does not, compare:

• package.json
• lockfile
• Node.js version
• extra dependencies
• package manager used

9. Recommended known-good checklist

• Use one package manager only.
• Use matching next, react, and react-dom versions.
• Delete node_modules and lockfiles before retesting.
• Verify there is only one installed React copy.
• Upgrade to the latest patch release if the issue is framework-specific.

Common Edge Cases

Mixed package managers

A repo with both package-lock.json and pnpm-lock.yaml can resolve packages differently across machines and CI. Keep exactly one lockfile.

Monorepo hoisting issues

In a workspace, another package may hoist a second React version into the dependency graph. Run npm ls react or your workspace equivalent from the app package and the repo root.

Third-party UI libraries with outdated peers

Some packages still assume older React behavior. Even if installation succeeds, build-time rendering can break. Check peer dependency warnings during install and test without the library.

Custom aliases in bundler config

If you manually alias react or react-dom in webpack or other tooling, you can accidentally point part of the app to a different module copy.

Node.js version differences

An unsupported or unusual Node.js version can produce hard-to-read build failures. Use an active LTS version recommended by Next.js and reinstall dependencies afterward.

Importing hooks from the wrong boundary

Components using hooks must run as Client Components when required. If a file uses interactivity but is treated as a Server Component, the error may look unrelated at first.

FAQ

Is this a bug in my page component?

Usually no. If a brand-new project fails before you add meaningful code, the problem is more likely a React/Next dependency resolution issue than a component logic issue.

Why does development sometimes work while next build fails?

Development mode and production build use different compilation and rendering paths. A dependency mismatch can stay hidden in dev and fail during the stricter production build pipeline.

Should I downgrade React 19 to fix it?

Only as a temporary isolation step. First try a clean reinstall, verify a single React copy, and update to the latest Next patch. Downgrading can help confirm the cause, but the preferred fix is to restore a compatible dependency tree.

The practical resolution for this issue is simple: clean the install, align next, react, and react-dom, eliminate duplicate React copies, and retest on the latest patch. In most cases, that removes the useContext null build failure without changing application code.