Issues with react-syntax-highlighter

[nickw1]

Describe the bug

Hi @lazarv,

Sorry, another possible bug report, this time with the react-syntax-highlighter package. The issue might once again be with the third-party package... I guess the reasons may be possibly similar to my last report with react-modal, the inconsistency of the JS ecosystem at times.

I am trying to use react-syntax-highlighter (https://github.com/react-syntax-highlighter/react-syntax-highlighter) but getting various errors on either dev or production. I'm finding that production in npm works, but dev doesn't work at all and production also fails in pnpm.

To go through the exact error logs for each combination:

production + npm : successful

npm with dev mode:

error loading dynamically imported module: http://localhost:3000/@fs/home/nick/src/syntax-highlight-test/SyntaxHighlight.jsx

pnpm in production mode: build fails with:

Build failed with 3 errors:

[UNLOADABLE_DEPENDENCY] Error: Could not load node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-ec43ff6-20250927-f1dac9ef_@types+node@24.5.2_es_1464cd6a5779a2f7da13c8701930dc87/node_modules/highlight.js/es/languages/htmlbars.js
     ╭─[ node_modules/react-syntax-highlighter/dist/esm/async-languages/hljs.js:235:99 ]
     │
 235 │     return import( /* webpackChunkName: "react-syntax-highlighter_languages_highlight_htmlbars" */"highlight.js/lib/languages/htmlbars");
     │                                                                                                   ──────────────────┬──────────────────  
     │                                                                                                                     ╰──────────────────── No such file or directory (os error 2)
─────╯

[UNLOADABLE_DEPENDENCY] Error: Could not load node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-ec43ff6-20250927-f1dac9ef_@types+node@24.5.2_es_1464cd6a5779a2f7da13c8701930dc87/node_modules/highlight.js/es/languages/c-like.js
    ╭─[ node_modules/react-syntax-highlighter/dist/esm/async-languages/hljs.js:70:96 ]
    │
 70 │     return import( /* webpackChunkName: "react-syntax-highlighter_languages_highlight_cLike" */"highlight.js/lib/languages/c-like");
    │                                                                                                ─────────────────┬─────────────────  
    │                                                                                                                 ╰─────────────────── No such file or directory (os error 2)
────╯

[UNLOADABLE_DEPENDENCY] Error: Could not load node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-ec43ff6-20250927-f1dac9ef_@types+node@24.5.2_es_1464cd6a5779a2f7da13c8701930dc87/node_modules/highlight.js/es/languages/sql_more.js
     ╭─[ node_modules/react-syntax-highlighter/dist/esm/async-languages/hljs.js:496:98 ]
     │
 496 │     return import( /* webpackChunkName: "react-syntax-highlighter_languages_highlight_sqlMore" */"highlight.js/lib/languages/sql_more");
     │                                                                                                  ──────────────────┬──────────────────  
     │                                                                                                                    ╰──────────────────── No such file or directory (os error 2)
─────╯

    at normalizeErrors (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/rolldown@1.0.0-beta.30/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:2258:18)
    at handleOutputErrors (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/rolldown@1.0.0-beta.30/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:2992:34)
    at transformToRollupOutput (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/rolldown@1.0.0-beta.30/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:2986:2)
    at RolldownBuild.write (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/rolldown@1.0.0-beta.30/node_modules/rolldown/dist/shared/src-DR2upIfp.mjs:4186:10)
    at async buildEnvironment (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/rolldown-vite@7.0.12_@types+node@24.5.2_esbuild@0.25.10_sass@1.93.2_terser@5.44.0_yaml@2.8.1/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:33419:52)
    at async Object.build (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/rolldown-vite@7.0.12_@types+node@24.5.2_esbuild@0.25.10_sass@1.93.2_terser@5.44.0_yaml@2.8.1/node_modules/rolldown-vite/dist/node/chunks/dep-DhQ4L5z7.js:33817:19)
    at async serverBuild (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-ec43ff6-20250927-f1dac9ef_@types+node@24.5.2_es_1464cd6a5779a2f7da13c8701930dc87/node_modules/@lazarv/react-server/lib/build/server.mjs:432:3)
    at async file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-ec43ff6-20250927-f1dac9ef_@types+node@24.5.2_es_1464cd6a5779a2f7da13c8701930dc87/node_modules/@lazarv/react-server/lib/build/action.mjs:61:39

pnpm with dev mode:

Cannot find module '/home/nick/src/syntax-highlight-test/node_modules/.pnpm/node_modules/lowlight/lib/core' imported from /home/nick/src/syntax-highlight-test/node_modules/.pnpm/rolldown-vite@7.0.12_@types+node@24.5.2_esbuild@0.25.10_sass@1.93.2_terser@5.44.0_yaml@2.8.1/node_modules/rolldown-vite/dist/node/module-runner.js Did you mean to import "lowlight/lib/core.js"?

at finalizeResolution (node:internal/modules/esm/resolve:275:11)
at moduleResolve (node:internal/modules/esm/resolve:860:10)
at defaultResolve (node:internal/modules/esm/resolve:984:11)
at nextResolve (node:internal/modules/esm/hooks:748:28)
at resolve (file:///home/nick/src/syntax-highlight-test/node_modules/.pnpm/@lazarv+react-server@0.0.0-experimental-ec43ff6-20250927-f1dac9ef_@types+node@24.5.2_es_1464cd6a5779a2f7da13c8701930dc87/node_modules/@lazarv/react-server/lib/loader/node-loader.mjs:7:16)
at nextResolve (node:internal/modules/esm/hooks:748:28)
at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
at MessagePort.handleMessage (node:internal/modules/esm/worker:199:24)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
at MessagePort.<anonymous> (node:internal/per_context/messageport:23:28)

Reproduction

https://github.com/nickw1/syntax-highlight-test

Steps to reproduce

git clone https://github.com/nickw1/syntax-highlight-test
then as described above (build or dev mode)

System Info

  System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 13th Gen Intel(R) Core(TM) i5-1340P
    Memory: 26.40 GB / 31.05 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.14.0 - /usr/local/node/bin/node
    npm: 11.3.0 - /usr/local/node/bin/npm
    pnpm: 10.12.1 - /usr/local/node/bin/pnpm
  Browsers:
    Chrome: 140.0.7339.207
  npmPackages:
    @lazarv/react-server: ^0.0.0-experimental-ebd3d13-20250925-5a529438 => 0.0.0-experimental-ec43ff6-20250927-f1dac9ef 
    vite: ^6.3.5 => 6.3

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[lazarv]

Hi @nickw1!

I'm working on resolving this issue to implement a proper fix, but it's a very complex use case. The framework itself uses highlight.js, which causes version mismatches. Additionally, the lowlight sub-dependency of react-syntax-highlighter is bundled incorrectly at the moment, without a workaround in the config using ssr.noExternal. For a correct production build, you also need to implement additional workarounds to ensure all necessary CSS is included.

I'm trying to make this fully work, but it will take a bit longer to resolve the issue. Sorry for the inconvenience!

Meanwhile, you could also try to use a more modern library for syntax highlighting, like Shiki https://shiki.matsu.io. I didn't test it directly with @lazarv/react-server, but I would consider it a much higher quality and ESM-compatible library.

[nickw1]

Hi @lazarv,

Many thanks for your reply. No rush to get it fixed!

Thanks for the tip re. Shiki. Will give that a try.

[nickw1]

Hi @lazarv, to follow up on this, Shiki is working fine so thanks for the tip!

[lazarv]

Hi @nickw1!
With the latest version of the framework, react-syntax-highlighter should also work. You might find Shiki great and don't want to look back, but you have the choice now.
react-syntax-highlighter works both in server and client components, but there's one caveat. To ensure the language is correctly processed in the production build, you must import the desired language. In development mode, all languages are loaded by react-syntax-highlighter, like with a barrel import. In the production build, all unused languages are removed, so you must import and register all that will be used in the app. I included an example to test and demo this, but this is how you need to use the library:

"use client";

import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
import { dark } from "react-syntax-highlighter/dist/esm/styles/hljs";

SyntaxHighlighter.registerLanguage("javascript", js);

export default function ClientCode() {
  return (
    <SyntaxHighlighter language="javascript" style={dark}>
      {`import { Link } from '@lazarv/react-server/navigation';`}
    </SyntaxHighlighter>
  );
}

I hope this update has provided significantly better support for other exotic packages as well, and there will be fewer incompatibility issues in the future.

[nickw1]

Hi @lazarv,

Many thanks!

I can confirm that it does indeed work. I am impressed with Shiki and will probably stick with it, but as you say we do now have the choice.

Closing now.

[github-actions]

This issue has been locked since it has been closed for more than 30 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest version of @lazarv/react-server. If you have any other comments you should create a new discussion.