Fixing “Module not found: Can’t resolve ‘@react-three/fiber'” in Next.js

This error usually appears when a Next.js app imports @react-three/fiber from a template, component, or starter project, but the package is not actually installed in the current project dependency tree. In projects cloned from templates, the bug often shows up after copying 3D components without bringing over all required packages.

Understanding the Root Cause

The build error Module not found: Can’t resolve ‘@react-three/fiber’ means the bundler tried to resolve an import like import { Canvas } from '@react-three/fiber' but could not find that package inside node_modules.

In a Next.js project, this typically happens for one of these technical reasons:

• The package @react-three/fiber was never installed.
• A related 3D package such as three or @react-three/drei is missing, and the template assumes those dependencies already exist.
• The lockfile or node_modules directory is out of sync after switching package managers.
• A monorepo, workspace, or copied template references dependencies that are installed elsewhere but not in the current app.
• The component is being imported into a server-only path in the App Router without correctly marking the file as a client component, causing confusing build failures alongside dependency issues.

For the linked reproduction, the key issue is simple: the template uses React Three Fiber, but the fresh Next.js setup does not include the required package set by default. Next.js does not ship with WebGL or Three.js bindings, so any import from @react-three/fiber must be backed by explicit dependencies.

Step-by-Step Solution

Install the missing package and its usual peer dependency first.

npm install @react-three/fiber three

If the template also uses helpers from drei, install that too.

npm install @react-three/drei

If you use Yarn:

yarn add @react-three/fiber three @react-three/drei

If you use pnpm:

pnpm add @react-three/fiber three @react-three/drei

1. Verify the import path

Make sure the code imports from the correct package name.

import { Canvas } from '@react-three/fiber'

Not:

import { Canvas } from 'react-three-fiber'

2. Mark 3D UI components as client components in the App Router

If the component renders a canvas, animation loop, hooks, or browser-only APIs, place 'use client'; at the top of the file.

'use client';

import { Canvas } from '@react-three/fiber';

export default function Scene() {
  return (
    <Canvas>
      {/* 3D content */}
    </Canvas>
  );
}

This does not replace dependency installation, but it prevents a second category of runtime and compilation problems in Next.js 13+.

3. Reinstall dependencies cleanly if the error persists

If the package is listed in package.json but Next.js still cannot resolve it, clear the install state.

rm -rf node_modules package-lock.json .next
npm install
npm run dev

For Yarn:

rm -rf node_modules yarn.lock .next
yarn install
yarn dev

For pnpm:

rm -rf node_modules pnpm-lock.yaml .next
pnpm install
pnpm dev

4. Confirm the dependency is actually present

npm ls @react-three/fiber three

If npm reports the package as missing, the app never received the dependency correctly.

5. Check template files for hidden 3D dependencies

Some starters import additional packages such as:

• @react-three/drei
• three
• maath
• zustand
• postprocessing

Search the codebase for @react-three and three imports.

grep -R "@react-three\|three" .

Then install any missing packages found by that search.

6. Example working setup

A minimal client component in Next.js should look like this:

'use client';

import { Canvas } from '@react-three/fiber';

function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

export default function ThreeScene() {
  return (
    <div>
      <Canvas>
        <ambientLight />
        <Box />
      </Canvas>
    </div>
  );
}

And the required dependencies should exist in package.json:

{
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest",
    "three": "latest",
    "@react-three/fiber": "latest"
  }
}

Common Edge Cases

• Package manager mismatch: If the project was installed with npm but later run with pnpm or Yarn, the lockfile may cause an inconsistent dependency graph.
• Copied component without copied dependencies: A template can include working code snippets that rely on packages not documented in the setup steps.
• Server component import: In the App Router, importing a Canvas-based component into a server component can trigger separate rendering issues. Add 'use client'; where needed.
• Workspace hoisting confusion: In a monorepo, one package may have access to @react-three/fiber while another does not. Install it in the app package that imports it.
• Build cache residue: The .next folder can preserve stale module resolution state after dependency changes.
• Version compatibility issues: If React, Next.js, and React Three Fiber are very far apart in major versions, install a current compatible set instead of mixing old starter code with new framework versions.

FAQ

Do I need both @react-three/fiber and three?

Yes. @react-three/fiber is the React renderer, while three provides the underlying 3D engine. In most setups, you need both.

Why does this happen in a fresh Next.js project?

Because a fresh Next.js install does not include Three.js tooling. If you add a template component that imports @react-three/fiber, you must install its dependencies manually.

What if I installed the package and still get the same error?

Delete node_modules, the lockfile, and .next, then reinstall. Also verify you are running the command in the correct app directory and that the import path is exactly @react-three/fiber.

The shortest reliable fix is: install @react-three/fiber and three, add 'use client'; for browser-rendered 3D components, and rebuild from a clean dependency state. That resolves the vast majority of cases behind this GitHub issue.