How to Fix: Next.js App throws error “Module not found: Can’t resolve ‘react

The error Module not found: Can’t resolve ‘react’ in a Next.js app usually means the project’s dependency graph is broken before the app even starts. In the linked reproduction, Next.js is trying to bundle application code, but the react package is either missing, not installed correctly, blocked by an invalid workspace/package setup, or the install state does not match the lockfile. Because Next.js depends directly on React, the build fails immediately when module resolution cannot find it.

Understanding the Root Cause

Next.js does not bundle its own private copy of React for your application. Instead, it expects react and react-dom to be resolvable from your project’s installed dependencies. When you run next dev or next build, the bundler walks the dependency tree starting from your app entrypoints. If it cannot locate the react package in node_modules or through a valid package manager workspace resolution, it throws the “Can’t resolve ‘react’” error.

This commonly happens for one of these technical reasons:

• React is not listed in dependencies inside package.json.
• Dependencies were not installed cleanly, leaving an incomplete node_modules tree.
• Lockfile/package-manager mismatch caused an invalid install state, such as using npm on a repo created for pnpm or yarn.
• Workspace or monorepo hoisting issues prevent the app package from resolving React where Next.js expects it.
• Corrupted cache or partially removed modules cause the package manager to think React is installed when it is not actually present.

In practical terms, this is a module resolution problem, not a rendering bug. The fix is to make sure the project declares the correct dependencies and reinstall them with a clean package state.

Step-by-Step Solution

Use the following sequence to fix the issue safely.

1. Verify that React and React DOM exist in package.json

Open package.json and make sure next, react, and react-dom are all declared under dependencies.

{
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  }
}

If react or react-dom is missing, install them explicitly.

npm install next react react-dom

If the repository uses Yarn:

yarn add next react react-dom

If it uses pnpm:

pnpm add next react react-dom

2. Remove the broken install state

Delete node_modules and the lockfile generated by the package manager you are using, then reinstall everything.

rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
npm install

If you know the project uses Yarn, reinstall with Yarn instead:

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

For pnpm:

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

This step is important because stale lockfiles often preserve a dependency tree that does not match the current project metadata.

3. Start the app again

npm run dev

Or:

yarn dev

Or:

pnpm dev

If the issue came from a missing or broken React installation, the app should now compile normally.

4. Check the installed versions

Make sure the installed versions are actually present.

npm ls react react-dom next

A healthy output should show react and react-dom installed beneath your project rather than marked missing.

5. If this is a monorepo, install dependencies in the correct package

In a workspace setup, the Next.js app must be able to resolve React from its own package context. Confirm that the app package itself declares the dependencies, or that the workspace is configured correctly for hoisting.

apps/web/package.json

{
  "name": "web",
  "dependencies": {
    "next": "14.x",
    "react": "18.x",
    "react-dom": "18.x"
  }
}

If React exists only at the root and your workspace tooling is misconfigured, Next.js may fail to resolve it during local development.

6. Clear framework cache if the error persists

rm -rf .next
npm run dev

This is less common, but it helps when an old build cache still references a bad dependency path.

Recommended final checklist

• package.json contains next, react, and react-dom.
• Only one package manager is used consistently.
• node_modules was rebuilt from scratch.
• The project is started from the correct app directory.
• If using a monorepo, the app package can resolve React locally.

Common Edge Cases

Using the wrong package manager

If the repo was created with pnpm but you ran npm install, the generated install layout may differ from what the workspace expects. Always use the package manager indicated by the lockfile already committed in the repository.

React declared in devDependencies instead of dependencies

react and react-dom should be in dependencies, not just devDependencies. Next.js requires them as runtime packages.

Monorepo path confusion

Developers often run the app from the repository root instead of the actual Next.js app folder. If the app lives in a subdirectory, install and run commands there unless the workspace scripts are explicitly configured at the root.

Broken symlinks or linked local packages

If the project depends on locally linked packages, an invalid symlink can interrupt Node.js resolution and surface as a missing React module. Rebuild links and reinstall dependencies.

Version mismatch between Next.js and React

While this specific error usually means React is missing, incompatible major versions can also create resolution or startup failures. Use a supported combination of Next.js, react, and react-dom.

Custom webpack or alias configuration

If the project overrides module resolution with a custom webpack config, an alias may accidentally point react to a non-existent path. Review next.config.js for custom resolve.alias entries.

FAQ

Why does Next.js need both react and react-dom installed?

react provides the core component API, while react-dom handles DOM rendering. Next.js relies on both packages for client and server rendering workflows.

Why did reinstalling node_modules fix the error?

Because the issue is often caused by an inconsistent dependency tree. Removing node_modules and the lockfile forces the package manager to rebuild a clean, resolvable module graph.

Can this happen even if react appears in package.json?

Yes. If installation failed, the wrong package manager was used, the workspace is misconfigured, or the app is running from the wrong directory, React can be declared but still not resolvable at runtime.

If you want to compare against the original reproduction, inspect the project from the GitHub issue repository and verify that the dependency declarations, install method, and runtime directory all match the expected Next.js setup.