[Bug]: Upgrading to react-syntax-highlighter 16 breaks storybook

[terrymun]

Describe the bug

I've managed to get syntax highlighting for SCSS to work by adapting the code from this comment: #25307 (comment)

import type { Preview } from '@storybook/react-vite';
import { SyntaxHighlighter } from 'storybook/internal/components';
import scss from 'react-syntax-highlighter/dist/cjs/languages/prism/scss';

A few days ago, react-syntax-highlighter has published a new major version (v16) to address security vulnerabilities related to a dated version of refractor.

However, upon upgrading to v16, any attempts to serve or build storybook will fail with this message:

Could not resolve "refractor/lang/scss.js"

node_modules/react-syntax-highlighter/dist/cjs/languages/prism/scss.js:8:43:
  8 │ var _scss = _interopRequireDefault(require("refractor/lang/scss.js"));
    ╵                                            ~~~~~~~~~~~~~~~~~~~~~~~~

The module "./lang/lang/scss.js.js" was not found on the file system:

node_modules/refractor/package.json:47:11:
  47 │     "./*": "./lang/*.js"

Reproduction link

https://stackblitz.com/edit/github-m92phszh

Reproduction steps

1. Install latest version of react-syntax-highlight@^16

2. Add the following to preview.ts:

   import scss from 'react-syntax-highlighter/dist/cjs/languages/prism/scss';
   import { SyntaxHighlighter } from 'storybook/internal/components';
   
   SyntaxHighlighter.registerLanguage('scss', scss);

3. Try to serve or build storybook. It will not work.

NOTE: Downgrading to react-syntax-highlighter@^15 works.

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: 9.1.13 => 9.1.13 
    @storybook/addon-onboarding: 9.1.13 => 9.1.13 
    @storybook/react-vite: 9.1.13 => 9.1.13 
    storybook: 9.1.13 => 9.1.13

Additional context

No response

[dosubot]

Hi @terrymun! I'm Dosu and I’m helping the storybook team.

This breakage is caused by a change in react-syntax-highlighter v16, which now relies on refractor v5 for language modules. The SCSS language file has moved, so the old import path (react-syntax-highlighter/dist/cjs/languages/prism/scss) no longer works and triggers the module resolution error you’re seeing. This is a known issue and is being discussed in the community here.

Workaround:
Instead of importing SCSS from react-syntax-highlighter, import it directly from refractor and register it with Storybook’s SyntaxHighlighter:

import { SyntaxHighlighter } from '@storybook/components';
// or 'storybook/internal/components' if that's what your setup uses
import scss from 'refractor/lang/scss';

SyntaxHighlighter.registerLanguage('scss', scss);

This aligns with the new module structure in refractor v5 and should restore SCSS syntax highlighting with react-syntax-highlighter v16.

If you need guaranteed compatibility and want to avoid this workaround, you can continue using react-syntax-highlighter v15 until Storybook updates its internal logic to support v16’s structure.

For updates, you can monitor issue #25307, as maintainers are aware and may address this in a future release.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[terrymun]

@dosu The suggestion is unfortunately invalid:

1. @storybook/components is deprecated and should be replaced by storybook/internal/components
2. You've linked to the known issue that my ticket already mentions, and the solution suggested in that issue is known to not work with the v16 of react-syntax-highlighter

[dosubot]

You're right—@storybook/components is deprecated and should be replaced by storybook/internal/components in Storybook 9.x and above (migration guide).

Currently, there is no official or reliable workaround for getting SCSS syntax highlighting working in Storybook 9.x with react-syntax-highlighter v16. The known workarounds (importing from refractor/lang/scss or the old react-syntax-highlighter paths) do not work due to breaking changes in how v16 resolves language modules (issue #25307). Downgrading to react-syntax-highlighter v15 remains the only confirmed way to restore SCSS highlighting for now.

Storybook maintainers are aware of the ongoing compatibility issues and are making related improvements, but there is no documented fix or migration path for v16 yet. If you need SCSS highlighting, sticking with v15 is the safest option until Storybook updates its internal logic or switches to a different highlighter (discussion).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}