Module not found: Can't resolve 'react-syntax-highlighter/dist/esm/styles/prism'

[panditj24]

Error Type

Build Error

Error Message

Module not found: Can't resolve 'react-syntax-highlighter/dist/esm/styles/prism'

Build Output

./app/generation/page.tsx:11:1
Module not found: Can't resolve 'react-syntax-highlighter/dist/esm/styles/prism'
9 | import { HeaderProvider } from '@/components/shared/header/HeaderContext';
10 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

11 | import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | // Import icons from centralized module to avoid Turbopack chunk issues
13 | import {
14 | FiFile,

Import traces:
Client Component Browser:
./app/generation/page.tsx [Client Component Browser]
./app/generation/page.tsx [Server Component]

Client Component SSR:
./app/generation/page.tsx [Client Component SSR]
./app/generation/page.tsx [Server Component]

https://nextjs.org/docs/messages/module-not-found

Next.js version: 15.5.3 (Turbopack)

GET /generation 500 in 4422ms
⨯ ./app/generation/page.tsx:11:1
Module not found: Can't resolve 'react-syntax-highlighter/dist/esm/styles/prism'
9 | import { HeaderProvider } from '@/components/shared/header/HeaderContext';
10 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

11 | import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | // Import icons from centralized module to avoid Turbopack chunk issues
13 | import {
14 | FiFile,

[jcd3dr]

Solution: Force compatible react-syntax-highlighter version via pnpm overrides

Hello everyone,

I was facing the same Module not found error and can confirm that it's due to a breaking change in a recent version of react-syntax-highlighter (v16.x). The project's code is expecting the file structure of version 15.5.0.

I managed to fix it reliably by forcing pnpm to install the compatible version.

The Solution

Here are the exact steps to solve this issue:

1. Add a pnpm override to your package.json

Add the following block to your package.json file. This tells pnpm to always use version 15.5.0 for this specific dependency.

"pnpm": {
  "overrides": {
    "react-syntax-highlighter": "15.5.0"
  }
}

2. Perform a clean reinstall

You must delete the old dependencies and cache folders to ensure the override is applied correctly. Run the following commands in your project's root directory:

# Clean project workspace
rm -rf node_modules .next pnpm-lock.yaml

# Reinstall dependencies
pnpm install

Note for Windows users: If you're not using Git Bash or WSL, you can use Remove-Item -Recurse -Force node_modules, .next, pnpm-lock.yaml in PowerShell.

3. Verify the original import

Make sure the import statement in ./app/generation/page.tsx is the one originally intended for v15.5.0:

import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

After these steps, running pnpm run dev should work without the build error.

Hope this helps everyone!