Fix refractor imports, migrate to webpack 5, update deps #621

UncleJart · 2025-10-22T22:50:00Z

List of changes:

Fixed refractor imports for v5.0.0
Downgraded lint-staged to latest Node 16 compatible version
Added cross-env so npm scripts with env vars definitions don't fail on Windows
Updated webpack to v5 with ESM libs support (required for proper refractor imports processing), updated webpack/babel plugins to latest versions with Node 16 support
Migrated webpack config to be v5 compatible
Updated Jest config to work with now ESM only refractor 5 - it was necessary to add mappings for refractor exports and add refractor and all of its deps to transformIgnorePatterns. All tests passed.
Added engines section to package.json with Node 16.20.2 requirement
All scripts from package.json were checked to run properly on Win 11 with Node 16.20.2
There is a warning during webpack build about changing NODE_ENV with DefinePlugin - its OK for webpack 5 and can be ignored

Briefly checked default Vite + React template with examples from react-syntax-highlighter Readme, seems like everything works OK - dev/prod build passed. Would be great if someone else checks it, also with webpack based project.

How to check (npm):

In package.json replace react-syntax-highlighter with the following version

"react-syntax-highlighter": "git+https://github.com/UncleJart/react-syntax-highlighter.git#aea2ad57526443240bbd321aabb298f7a1d01b68"

Run npm i
Run dev/prod build and check the results

abentele · 2025-10-23T05:41:51Z

tested within my vitejs (rolldown-vite) based application. Works for me, no errors in browser console or in the application any more.
Remarks: I only tested a small part of this lib, this is no complete review.

The relevant code in my app is:

import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs"
const SyntaxHighlighter = React.lazy(() => import("react-syntax-highlighter"))
[...]
                                    <SyntaxHighlighter language="xml" style={docco}>
                                        {transaction.originalFileContent!}
                                    </SyntaxHighlighter>

Some dependencies in my app's package.json:

...
        "@vitejs/plugin-react": "^5.0.4",
        "vite": "npm:[email protected]",
        "react": "19.2.0",
...

To integrate the pull request in my app I used this commands:

git clone https://github.com/UncleJart/react-syntax-highlighter.git
cd react-syntax-highlighter
git checkout v16-fix-refractor-imports
npm install
npm run build

# and then in my app folder:
npm install --no-save <absolute-path-of-the-above-repo>/react-syntax-highlighter

UncleJart · 2025-10-23T06:43:40Z

npm install in package dir already runs build, so it is not necessary to run it separately:

"prepare": "npm run build-styles-hljs && npm run build-languages-hljs && npm run build-styles-prism && npm run build-languages-prism && npm run build"

Also, if package cloned locally, you can use npm link.

abentele · 2025-10-23T07:29:38Z

Since npm link requires sudo privileges on macOS, I used the "npm install --no-save" variant instead. It's easier for a one-time test.

UncleJart · 2025-10-23T07:41:02Z

Added to PR description instructions how package can be installed directly from github (for npm).

Checked on webpack 5 based project which uses hljs imports - everything builds/works as expected. These are not refractor imports, but still.

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
import vs from 'react-syntax-highlighter/dist/esm/styles/hljs/vs';

const Component = () => {
...
<div className="query-body">
      {contentType
        ? (<SyntaxHighlighter language={contentType} style={vs} wrapLongLines>{command}</SyntaxHighlighter>)
        : (<pre><code>{command}</code></pre>)
      }
    </div>
...
}

jonepo · 2025-10-23T07:59:04Z

This also works for my React project now that uses Vite 6.4.1. In addition, I'm using the dev dependency "@types/react-syntax-highlighter": "^15.5.13". The code I'm using this library in my component is as follows:

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

export const MyComponent = () => {
  ...
	return (
		<SyntaxHighlighter
			PreTag='div'
			language={match[1]}
			style={vscDarkPlus}
			className={'text-content-codeblock-inner'}
			{...props}>
			{children}
		</SyntaxHighlighter>
	);
};

skvark · 2025-10-23T11:58:35Z

The fix works on my project as well which uses rsbuild:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneLight, oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';

export const MyComponent = () => {
  ...
	return (
        <SyntaxHighlighter
          language={language}
          style={isDark ? oneDark : oneLight}
        />
	);
};

elchininet · 2025-10-26T12:15:32Z

This fixes the errors in one of my projects that got broken after the update to [email protected].

sacummings91 · 2025-10-27T19:09:56Z

Tried this in our vite 6 project and it fixes the build issue!

simmerer · 2025-10-28T15:42:13Z

Thank you so much @UncleJart and everyone for testing. I'll get this out shortly as 16.1.0

simmerer · 2025-10-28T15:58:59Z

fix refractor imports, migrate to webpack 5, update deps

aea2ad5

UncleJart mentioned this pull request Oct 22, 2025

react-syntax-highlighter 16 does not build with Vite #620

Closed

joeyorlando mentioned this pull request Oct 23, 2025

deps(platform): bump react-syntax-highlighter from 15.6.6 to 16.0.0 in /platform archestra-ai/archestra#781

Closed

simmerer merged commit c71356f into react-syntax-highlighter:master Oct 28, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Fix refractor imports, migrate to webpack 5, update deps #621

Fix refractor imports, migrate to webpack 5, update deps #621

Uh oh!

UncleJart commented Oct 22, 2025 •

edited

Loading

Uh oh!

abentele commented Oct 23, 2025 •

edited

Loading

Uh oh!

UncleJart commented Oct 23, 2025 •

edited

Loading

Uh oh!

abentele commented Oct 23, 2025

Uh oh!

UncleJart commented Oct 23, 2025 •

edited

Loading

Uh oh!

jonepo commented Oct 23, 2025

Uh oh!

skvark commented Oct 23, 2025

Uh oh!

elchininet commented Oct 26, 2025

Uh oh!

sacummings91 commented Oct 27, 2025

Uh oh!

simmerer commented Oct 28, 2025

Uh oh!

Uh oh!

simmerer commented Oct 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Uh oh!

Fix refractor imports, migrate to webpack 5, update deps #621

Fix refractor imports, migrate to webpack 5, update deps #621

Uh oh!

Conversation

UncleJart commented Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abentele commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

UncleJart commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abentele commented Oct 23, 2025

Uh oh!

UncleJart commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jonepo commented Oct 23, 2025

Uh oh!

skvark commented Oct 23, 2025

Uh oh!

elchininet commented Oct 26, 2025

Uh oh!

sacummings91 commented Oct 27, 2025

Uh oh!

simmerer commented Oct 28, 2025

Uh oh!

Uh oh!

simmerer commented Oct 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

UncleJart commented Oct 22, 2025 •

edited

Loading

abentele commented Oct 23, 2025 •

edited

Loading

UncleJart commented Oct 23, 2025 •

edited

Loading

UncleJart commented Oct 23, 2025 •

edited

Loading