Maintenance: Fix bundle size bloat caused by SyntaxHighlighter (createElement)

[mrginglymus]

Current state of manager/globals-runtime.js:

With this PR:

We'd been importing from a barrel file. Because esbuild is very cautious in tree shaking, all the other unused exports were not removed so we ended up pulling in all of highlight.js and all of refractor

Less significant bonus as they're lazy imports, but the storybook browser tree goes from:

to this:

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Chores
  • Updated internal dependency imports for syntax highlighter component to optimize module resolution without affecting functionality.

[coderabbitai]

📝 Walkthrough

Walkthrough

A single file update that changes the import path of the createElement function from the react-syntax-highlighter library, switching from a named import via the main entry point to a default import from a specific module path. No functional logic changes.

Changes

Cohort / File(s)	Summary
Import resolution refactor code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx	Changed createElement import from named import ('react-syntax-highlighter/dist/esm/index') to default import from specific module ('react-syntax-highlighter/dist/esm/create-element')

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aa8a708 and 16b602e.

📒 Files selected for processing (1)

• code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

• code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (1)

code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx (1)

10-10: No issues found—the import change is correct.

Verification confirms that react-syntax-highlighter/dist/esm/create-element exports createElement as a default export, making the import statement correct and syntactically sound. The usage pattern in the defaultRenderer function (line 152) is appropriate, and the optimization goal of improving tree-shaking by avoiding the barrel file is valid. The @ts-expect-error suppression is a pre-existing issue (marked "Converted from ts-ignore") and is not introduced by this change. The file also follows coding guidelines with proper logger usage and no direct console.* calls.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8f41d5d

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	47s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-24 13:02:22 UTC

[JReinhold]

🎉

[storybook-app-bot]

Package Benchmarks

^{Commit: 8f41d5d, ran on 24 October 2025 at 12:56:17 UTC}

The following packages have significant changes to their size or dependencies:

storybook

	Before	After	Difference
Dependency count	43	43	0
Self size	30.14 MB	24.84 MB	🎉 -5.30 MB 🎉
Dependency size	17.36 MB	17.36 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	187	187	0
Self size	928 KB	928 KB	0 B
Dependency size	80.09 MB	74.79 MB	🎉 -5.30 MB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	169	169	0
Self size	35 KB	35 KB	🚨 +42 B 🚨
Dependency size	76.52 MB	71.22 MB	🎉 -5.30 MB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	44	44	0
Self size	1.55 MB	1.55 MB	0 B
Dependency size	47.50 MB	42.20 MB	🎉 -5.30 MB 🎉
Bundle Size Analyzer	node	node

[domyen]

❤️