React: Prebundle react/jsx-runtime to avoid a reload when plugins import it

[nishimoto265]

Closes #36681

What I did

Added react/jsx-runtime to optimizeViteDeps in the React renderer preset.

Vite plugins such as vite-plugin-svgr emit react/jsx-runtime imports while transforming non-JS files. The dependency scan does not run those transforms, so the import is only found while stories are rendering. Vite then re-optimizes React and reloads, and with addon-vitest the page ends up with two copies of React (Invalid hook call). This happens on every run with an empty cache, such as CI.

@vitejs/plugin-react and @storybook/addon-docs already include react/jsx-runtime, so the bug only shows up when neither is used, for example nextjs-vite without addon-docs. This is the same reason react-dom/test-utils is listed here.

I used Claude Code to investigate the cause, build the reproduction and draft this PR. I reviewed the findings and the changes.

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

1. Clone https://github.com/nishimoto265/storybook-nextjs-vite-jsx-runtime-repro and run npm install && npx playwright install chromium.
2. Run npm run test-storybook:cold. It fails with dependency optimized: react/jsx-runtime followed by Invalid hook call.
3. Install the canary build of this PR (or add "react/jsx-runtime" to optimizeViteDeps in node_modules/@storybook/nextjs-vite/node_modules/@storybook/react/dist/preset.js).
4. Run npm run test-storybook:cold again. It passes, and the log no longer shows optimized dependencies changed. reloading.

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

• Declare whether manual QA will be needed for this PR during the next release, through qa:needed or qa:skip

• 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 - 🚫 Not run

This PR does not have a canary release associated.

In-repo PRs: add the ci:canary label. Later pushes republish while the label remains.

Fork PRs: the label does nothing (a later push must not auto-publish). A maintainer publishes from this repository with Run workflow and the pr input. branch and sha are optional; if more than one is set, they must be the same commit. The fork author does not need to do anything.

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[github-actions]

	Fails
🚫	This PR needs an approving review from a Storybook Core or Developer Experience team member before it can be merged. No approvals found.

Generated by 🚫 dangerJS against 0447c24

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 523c1fac-d248-4bf1-b574-31cab547f6eb

📥 Commits

Reviewing files that changed from the base of the PR and between 47ed1c0 and 0447c24.

📒 Files selected for processing (2)

• code/renderers/react/src/preset.test.ts
• code/renderers/react/src/preset.ts

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

Walkthrough

The React renderer preset now includes react/jsx-runtime in Vite’s optimized dependencies. A test verifies that the dependency is included.

Changes

React Vite dependency optimization

Layer / File(s)	Summary
Add jsx-runtime to optimized dependencies code/renderers/react/src/preset.ts, code/renderers/react/src/preset.test.ts	optimizeViteDeps now includes react/jsx-runtime. A test asserts that the dependency is present.

Priority: ➖ Normal

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 0447c

The change covers the reported late-import scenario, and no actionable merge risk remains.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[storybook-app-bot]

Package Benchmarks

^{Commit: 0447c24, ran on 9 October 2026 at 23:41:19 UTC}

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

@storybook/builder-vite

	Before	After	Difference
Dependency count	1	1	0
Self size	206 KB	195 KB	🎉 -11 KB 🎉
Dependency size	28 KB	28 KB	0 B
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	73	73	0
Self size	21.64 MB	21.62 MB	🎉 -20 KB 🎉
Dependency size	31.24 MB	31.24 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/angular-vite

	Before	After	Difference
Dependency count	20	20	0
Self size	23.42 MB	23.42 MB	🚨 +3 KB 🚨
Dependency size	11.56 MB	11.55 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/html-vite

	Before	After	Difference
Dependency count	4	4	0
Self size	22 KB	22 KB	0 B
Dependency size	269 KB	259 KB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	100	100	0
Self size	1.42 MB	1.42 MB	0 B
Dependency size	24.16 MB	24.15 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/preact-vite

	Before	After	Difference
Dependency count	4	4	0
Self size	12 KB	12 KB	🚨 +12 B 🚨
Dependency size	287 KB	276 KB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	117	120	🚨 +3 🚨
Self size	104 KB	29 KB	🎉 -75 KB 🎉
Dependency size	26.10 MB	26.28 MB	🚨 +187 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	78	78	0
Self size	33 KB	33 KB	🚨 +18 B 🚨
Dependency size	21.27 MB	21.26 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/svelte-vite

	Before	After	Difference
Dependency count	12	12	0
Self size	56 KB	56 KB	0 B
Dependency size	30.73 MB	30.72 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/sveltekit

	Before	After	Difference
Dependency count	13	13	0
Self size	58 KB	58 KB	🎉 -24 B 🎉
Dependency size	30.79 MB	30.77 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/tanstack-react

	Before	After	Difference
Dependency count	79	79	0
Self size	124 KB	124 KB	🎉 -81 B 🎉
Dependency size	21.31 MB	21.30 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/vue3-vite

	Before	After	Difference
Dependency count	95	95	0
Self size	32 KB	32 KB	0 B
Dependency size	18.77 MB	18.74 MB	🎉 -31 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/web-components-vite

	Before	After	Difference
Dependency count	6	6	0
Self size	19 KB	19 KB	0 B
Dependency size	515 KB	423 KB	🎉 -92 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	179	179	0
Self size	872 KB	863 KB	🎉 -9 KB 🎉
Dependency size	87.08 MB	87.06 MB	🎉 -21 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	172	172	0
Self size	44 KB	44 KB	0 B
Dependency size	85.57 MB	85.55 MB	🎉 -20 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	74	74	0
Self size	1.07 MB	1.07 MB	🎉 -633 B 🎉
Dependency size	52.88 MB	52.86 MB	🎉 -20 KB 🎉
Bundle Size Analyzer	node	node

@storybook/vue3

	Before	After	Difference
Dependency count	91	91	0
Self size	229 KB	209 KB	🎉 -20 KB 🎉
Dependency size	18.21 MB	18.21 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/web-components

	Before	After	Difference
Dependency count	4	4	0
Self size	182 KB	101 KB	🎉 -81 KB 🎉
Dependency size	126 KB	126 KB	0 B
Bundle Size Analyzer	Link	Link