React Native Web: Simplify config by using vite-plugin-rnw

[dannyhw]

Closes #

What I did

A problem with vite plugin react is that we can't do some of the module transforms we need to do because they completely block any node_modules from being transformed. This lead to the need for a babel plugin and the need for a separate set of config for what should be transformed essentially duplicating all the configuration and making it harder to use.

The rnw plugin I created takes the react plugin and adjusts it to better support react native web by allowing node_modules to be transformed, it also adds all the boilerplate crap that we need to make react native libraries believe we're ok to run on the web.

The main benefit in my mind is that the configuration becomes simplified

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 pull request has been released as version 0.0.0-pr-32051-sha-e639acf8. Try it out in a new sandbox by running npx storybook@0.0.0-pr-32051-sha-e639acf8 sandbox or in an existing project with npx storybook@0.0.0-pr-32051-sha-e639acf8 upgrade.

More information

Published version	0.0.0-pr-32051-sha-e639acf8
Triggered by	@shilman
Repository	storybookjs/storybook
Branch	dannyhw/feat/use-vite-plugin-rnw
Commit	e639acf8
Datetime	Sun Jul 20 15:39:18 UTC 2025 (1753025958)
Workflow run	16401524121

To request a new release of this pull request, mention the @storybookjs/core team.

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

Greptile Summary

This PR significantly simplifies the React Native Web configuration in Storybook by replacing multiple Vite plugins with a single unified vite-plugin-rnw. The key changes include:

1. Removing the dual configuration for module transformation that was previously required
2. Replacing multiple plugins (@bunchtogether/vite-plugin-flow, @vitejs/plugin-react, vite-plugin-babel, vite-plugin-commonjs) with vite-plugin-rnw
3. Introducing a new modulesToTranspile option for better control over which node_modules packages get transformed
4. Deprecating pluginBabelOptions in favor of pluginReactOptions

This change addresses a fundamental limitation where Vite's plugin-react completely blocked node_modules from being transformed, which forced the use of duplicate configurations and separate babel plugins. The new plugin extends React's plugin functionality while adding proper support for React Native Web-specific requirements.

Confidence score: 4/5

1. This PR is safe to merge as it simplifies configuration while maintaining existing functionality
2. The score reflects high confidence because the changes are well-structured and improve the developer experience, though the lack of automated tests is a minor concern
3. Key files needing attention:
   • docs/get-started/frameworks/react-native-web-vite.mdx (ensure documentation accuracy)
   • code/frameworks/react-native-web-vite/src/preset.ts (verify module transformation logic)

_{6 files reviewed, 4 comments
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 7e24f06

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

---

☁️ Nx Cloud last updated this comment at 2025-07-22 12:34:19 UTC

[storybook-app-bot]

Package Benchmarks

^{Commit: 7e24f06, ran on 22 July 2025 at 12:20:10 UTC}

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

storybook

	Before	After	Difference
Dependency count	56	56	0
Self size	41.36 MB	41.35 MB	🎉 -16 KB 🎉
Dependency size	18.22 MB	18.22 MB	0 B
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	161	163	🚨 +2 🚨
Self size	35 KB	32 KB	🎉 -3 KB 🎉
Dependency size	23.60 MB	23.66 MB	🚨 +61 KB 🚨
Bundle Size Analyzer	Link	Link

sb

	Before	After	Difference
Dependency count	57	57	0
Self size	1 KB	1 KB	0 B
Dependency size	59.59 MB	59.57 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	221	221	0
Self size	584 KB	584 KB	0 B
Dependency size	103.99 MB	103.97 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	190	190	0
Self size	31 KB	31 KB	0 B
Dependency size	88.08 MB	88.06 MB	🎉 -16 KB 🎉
Bundle Size Analyzer	Link	Link

[shilman]

Amazing simplification! 🚀

[greptile-apps]

Reviewing changes made in this pull request

[shilman]

Awesome job @dannyhw !! This is a fantastic simplification.