Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9.6k
React Native Web: Simplify config by using vite-plugin-rnw#32051
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:next
Are you sure you want to change the base?
Conversation
nx-cloudbot commentedJul 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
View yourCI Pipeline Execution ↗ for commit493e3e5
☁️Nx Cloud last updated this comment at |
storybook-pr-benchmarkingbot commentedJul 16, 2025 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 161 | 163 | 🚨 +2 🚨 |
| Self size | 35 KB | 32 KB | 🎉 -3 KB 🎉 |
| Dependency size | 23.60 MB | 23.65 MB | 🚨 +52 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
shilman left a comment• edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Amazing simplification! 🚀
| export type FrameworkOptions = FrameworkOptionsBase & { | ||
| pluginReactOptions?: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions }; | ||
| pluginBabelOptions?: BabelPluginOptions & { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Breaking change, can we deprecate & ignore instead?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Tho I'm curious how would the user customize the babel settings now?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
The babel settings are still there thats still how the react plugin works, i just changed it so you can have one set of babel config.
Note that theres a babel option even in the react plugin its just that before we had that and a separate babel plugin only configuration
Uh oh!
There was an error while loading.Please reload this page.
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:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR containsone 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: Documentationonly 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/coreteam here.core team members can create a canary releasehere or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>