Skip to content

React Native Web: Update vite-plugin-rnw for overall improvements#32991

Merged
shilman merged 3 commits into
storybookjs:nextfrom
dannyhw:feat/update-rnw-plugin-for-overall-improvements
Nov 9, 2025
Merged

React Native Web: Update vite-plugin-rnw for overall improvements#32991
shilman merged 3 commits into
storybookjs:nextfrom
dannyhw:feat/update-rnw-plugin-for-overall-improvements

Conversation

@dannyhw
Copy link
Copy Markdown
Member

@dannyhw dannyhw commented Nov 8, 2025

Closes #

What I did

The new version of vite-plugin-rnw removes the forked version of vite-plugin-react and adds more support for esm file extensions like .mjs. Theres also some fixes for expo-modules-core getting tree shaken in places it shouldn't and also the same for react-native-css

this may also serve to make it easier to get rn-reusables working.

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 a build plugin dependency to a newer version for improved compatibility.
    • Aligned internal type definitions to match the updated plugin's configuration shape and documentation.

@dannyhw dannyhw added ci:normal maintenance User-facing maintenance tasks labels Nov 8, 2025
@dannyhw dannyhw requested a review from shilman November 8, 2025 22:43
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Nov 8, 2025

📝 Walkthrough

Walkthrough

Bumped vite-plugin-rnw from ^0.0.6 to ^0.0.8 and updated type definitions in code/frameworks/react-native-web-vite/src/types.ts to use RnwOptions from vite-plugin-rnw for pluginReactOptions (replacing prior ReactOptions/BabelOptions composition).

Changes

Cohort / File(s) Change Summary
Dependency Version Update
code/frameworks/react-native-web-vite/package.json
Bumped vite-plugin-rnw from ^0.0.6 to ^0.0.8.
Type definitions
code/frameworks/react-native-web-vite/src/types.ts
Replaced imports of BabelOptions and ReactOptions with RnwOptions from vite-plugin-rnw; updated FrameworkOptions so pluginReactOptions is RnwOptions (Babel config now accessed via pluginReactOptions.babel).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Pay attention to src/types.ts changes for downstream type compatibility where pluginReactOptions is used.
  • Verify any consumer code or docs that referenced the previous ReactOptions/BabelOptions shape.
✨ Finishing touches
  • 📝 Generate docstrings

📜 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 4c99ea4 and 571c607.

📒 Files selected for processing (1)
  • code/frameworks/react-native-web-vite/src/types.ts (2 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/frameworks/react-native-web-vite/src/types.ts
**/*.{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/frameworks/react-native-web-vite/src/types.ts
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/frameworks/react-native-web-vite/src/types.ts
{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/frameworks/react-native-web-vite/src/types.ts
🧠 Learnings (2)
📚 Learning: 2025-11-05T09:38:47.694Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.694Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • code/frameworks/react-native-web-vite/src/types.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

Applied to files:

  • code/frameworks/react-native-web-vite/src/types.ts
⏰ 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). (2)
  • GitHub Check: normal
  • GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (3)
code/frameworks/react-native-web-vite/src/types.ts (3)

8-8: Clean type consolidation.

The import simplification aligns well with the plugin upgrade, delegating type definitions to the upstream package.


21-23: Documentation correctly updated.

The deprecation notice accurately reflects the new structure and clearly directs users to configure Babel via pluginReactOptions.babel.


19-19: No issues found; code change is safe and appropriate.

The type simplification is verified as compatible. RnwOptions from vite-plugin-rnw supports both babel and jsxRuntime configuration properties, which are the only properties accessed in preset.ts (lines 38, 42). This is a localized, framework-specific type change that does not affect the public API surface of other frameworks.


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

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Nov 8, 2025

View your CI Pipeline Execution ↗ for commit 571c607

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

☁️ Nx Cloud last updated this comment at 2025-11-08 23:20:18 UTC

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 67db3e4 and 4c99ea4.

⛔ Files ignored due to path filters (1)
  • code/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (1)
  • code/frameworks/react-native-web-vite/package.json (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{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/frameworks/react-native-web-vite/package.json
🧠 Learnings (3)
📚 Learning: 2025-10-02T09:22:13.215Z
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.

Applied to files:

  • code/frameworks/react-native-web-vite/package.json
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

Applied to files:

  • code/frameworks/react-native-web-vite/package.json
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.

Applied to files:

  • code/frameworks/react-native-web-vite/package.json
⏰ 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). (2)
  • GitHub Check: normal
  • GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (1)
code/frameworks/react-native-web-vite/package.json (1)

55-61: Confirm no additional dependency or configuration changes are needed.

The PR objectives mention that the new vite-plugin-rnw version removes the forked vite-plugin-react, adds ESM file extension support, and fixes tree-shaking issues. This dependency update alone may not be sufficient if:

  • Other integration files (e.g., vite.config files, preset configuration) need updates to align with the plugin changes
  • Additional dependencies need to be added or removed
  • Configuration changes are required to enable the new features (ESM support, tree-shaking fixes)

Please confirm that this package.json change is the only configuration update needed, or provide details on any other files that need updating to fully realize the PR's objectives.

"@storybook/react": "workspace:*",
"@storybook/react-vite": "workspace:*",
"vite-plugin-rnw": "^0.0.6",
"vite-plugin-rnw": "^0.0.8",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify vite-plugin-rnw@0.0.8 exists and confirm no breaking changes.

The version bump looks good and aligns with the PR's objective to improve the vite-plugin-rnw integration. However, since this is a pre-1.0.0 package (^0.0.x), minor version changes can introduce breaking changes.

Please verify:

  1. That vite-plugin-rnw@0.0.8 exists on npm and is stable
  2. That there are no breaking changes between 0.0.6 and 0.0.8 (e.g., API changes, configuration changes)
  3. That no Storybook configuration files (vite.config.ts, preset files, etc.) require updates to leverage or accommodate the new plugin features

🌐 Web query:

What is the latest version of vite-plugin-rnw and what are the breaking changes between 0.0.6 and 0.0.8?

💡 Result:

Latest published version: 0.0.7. [1][2]

There is no 0.0.8 release published (I couldn’t find any 0.0.8 on npm/registry or GitHub), so there are no breaking changes to report between 0.0.6 and 0.0.8 — if you meant 0.0.6 → 0.0.7, no changelog or breaking-change notes are published for that bump. [1][2]

Sources:

  • Package listing (vite-plugin-rnw) showing versions (latest 0.0.7). [1]
  • Libraries.io npm entry for vite-plugin-rnw (shows available versions). [2]

vite-plugin-rnw@0.0.8 does not exist — update to @0.0.7 (latest available version)

The latest published version of vite-plugin-rnw is 0.0.7; there is no 0.0.8 release published on npm or GitHub. The version specified in line 59 will cause package installation to fail. Update "vite-plugin-rnw": "^0.0.8" to "vite-plugin-rnw": "^0.0.7".

🤖 Prompt for AI Agents
In code/frameworks/react-native-web-vite/package.json at line 59, the dependency
"vite-plugin-rnw": "^0.0.8" references a non-existent 0.0.8 release and will
break installs; change the version to "vite-plugin-rnw": "^0.0.7" (the latest
published) in that line so package.json points to an available release and
update lockfile/install dependencies afterwards.

Copy link
Copy Markdown
Member Author

@dannyhw dannyhw Nov 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

um yes it does exist 😄
image

@storybook-app-bot
Copy link
Copy Markdown

storybook-app-bot Bot commented Nov 8, 2025

Package Benchmarks

Commit: 571c607, ran on 16 November 2025 at 14:04:33 UTC

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

@storybook/addon-a11y

Before After Difference
Dependency count 2 2 0
Self size 414 KB 509 KB 🚨 +96 KB 🚨
Dependency size 2.97 MB 2.97 MB 🎉 -3 B 🎉
Bundle Size Analyzer Link Link

@storybook/addon-docs

Before After Difference
Dependency count 18 18 0
Self size 1.65 MB 1.88 MB 🚨 +232 KB 🚨
Dependency size 9.25 MB 10.21 MB 🚨 +963 KB 🚨
Bundle Size Analyzer Link Link

storybook-addon-pseudo-states

Before After Difference
Dependency count 0 0 0
Self size 21 KB 24 KB 🚨 +3 KB 🚨
Dependency size 692 B 689 B 🎉 -3 B 🎉
Bundle Size Analyzer Link Link

@storybook/addon-themes

Before After Difference
Dependency count 1 1 0
Self size 18 KB 20 KB 🚨 +2 KB 🚨
Dependency size 28 KB 28 KB 🎉 -3 B 🎉
Bundle Size Analyzer Link Link

@storybook/addon-vitest

Before After Difference
Dependency count 6 6 0
Self size 441 KB 509 KB 🚨 +68 KB 🚨
Dependency size 570 KB 1.53 MB 🚨 +958 KB 🚨
Bundle Size Analyzer Link Link

@storybook/builder-vite

Before After Difference
Dependency count 11 11 0
Self size 291 KB 330 KB 🚨 +39 KB 🚨
Dependency size 1.30 MB 1.30 MB 🚨 +1 KB 🚨
Bundle Size Analyzer Link Link

storybook

Before After Difference
Dependency count 44 43 🎉 -1 🎉
Self size 21.70 MB 23.02 MB 🚨 +1.32 MB 🚨
Dependency size 17.16 MB 17.36 MB 🚨 +204 KB 🚨
Bundle Size Analyzer Link Link

@storybook/angular

Before After Difference
Dependency count 187 187 0
Self size 114 KB 126 KB 🚨 +12 KB 🚨
Dependency size 29.99 MB 30.00 MB 🚨 +7 KB 🚨
Bundle Size Analyzer Link Link

@storybook/html-vite

Before After Difference
Dependency count 14 14 0
Self size 22 KB 23 KB 🚨 +876 B 🚨
Dependency size 1.63 MB 1.67 MB 🚨 +41 KB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs

Before After Difference
Dependency count 533 533 0
Self size 645 KB 749 KB 🚨 +103 KB 🚨
Dependency size 58.78 MB 58.92 MB 🚨 +131 KB 🚨
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 124 124 0
Self size 1.12 MB 3.83 MB 🚨 +2.71 MB 🚨
Dependency size 21.71 MB 21.87 MB 🚨 +164 KB 🚨
Bundle Size Analyzer Link Link

@storybook/preact-vite

Before After Difference
Dependency count 14 14 0
Self size 13 KB 14 KB 🚨 +979 B 🚨
Dependency size 1.61 MB 1.65 MB 🚨 +41 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 156 156 0
Self size 30 KB 31 KB 🚨 +1 KB 🚨
Dependency size 22.89 MB 23.05 MB 🚨 +162 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 114 114 0
Self size 35 KB 37 KB 🚨 +2 KB 🚨
Dependency size 19.51 MB 19.67 MB 🚨 +162 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 273 273 0
Self size 24 KB 25 KB 🚨 +1 KB 🚨
Dependency size 43.74 MB 43.87 MB 🚨 +131 KB 🚨
Bundle Size Analyzer Link Link

@storybook/svelte-vite

Before After Difference
Dependency count 19 19 0
Self size 56 KB 59 KB 🚨 +3 KB 🚨
Dependency size 26.75 MB 26.79 MB 🚨 +43 KB 🚨
Bundle Size Analyzer Link Link

@storybook/sveltekit

Before After Difference
Dependency count 20 20 0
Self size 56 KB 58 KB 🚨 +2 KB 🚨
Dependency size 26.80 MB 26.85 MB 🚨 +46 KB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3-vite

Before After Difference
Dependency count 109 109 0
Self size 36 KB 38 KB 🚨 +3 KB 🚨
Dependency size 43.90 MB 43.95 MB 🚨 +46 KB 🚨
Bundle Size Analyzer Link Link

@storybook/web-components-vite

Before After Difference
Dependency count 15 15 0
Self size 19 KB 20 KB 🚨 +906 B 🚨
Dependency size 1.65 MB 1.70 MB 🚨 +42 KB 🚨
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 188 187 🎉 -1 🎉
Self size 838 KB 928 KB 🚨 +91 KB 🚨
Dependency size 71.34 MB 72.96 MB 🚨 +1.62 MB 🚨
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 170 169 🎉 -1 🎉
Self size 30 KB 35 KB 🚨 +5 KB 🚨
Dependency size 67.87 MB 69.39 MB 🚨 +1.52 MB 🚨
Bundle Size Analyzer Link Link

create-storybook

Before After Difference
Dependency count 45 44 🎉 -1 🎉
Self size 1.45 MB 1.55 MB 🚨 +96 KB 🚨
Dependency size 38.86 MB 40.38 MB 🚨 +1.52 MB 🚨
Bundle Size Analyzer node node

@storybook/csf-plugin

Before After Difference
Dependency count 9 9 0
Self size 8 KB 9 KB 🚨 +1 KB 🚨
Dependency size 1.27 MB 1.27 MB 🎉 -3 B 🎉
Bundle Size Analyzer Link Link

@storybook/react-dom-shim

Before After Difference
Dependency count 0 0 0
Self size 18 KB 22 KB 🚨 +4 KB 🚨
Dependency size 791 B 788 B 🎉 -3 B 🎉
Bundle Size Analyzer Link Link

@storybook/preset-create-react-app

Before After Difference
Dependency count 68 68 0
Self size 32 KB 36 KB 🚨 +4 KB 🚨
Dependency size 5.98 MB 5.98 MB 🎉 -3 B 🎉
Bundle Size Analyzer Link Link

@storybook/preset-react-webpack

Before After Difference
Dependency count 170 170 0
Self size 18 KB 21 KB 🚨 +2 KB 🚨
Dependency size 31.20 MB 31.20 MB 🚨 +1 KB 🚨
Bundle Size Analyzer Link Link

@storybook/preset-server-webpack

Before After Difference
Dependency count 10 10 0
Self size 7 KB 8 KB 🚨 +2 KB 🚨
Dependency size 1.20 MB 1.20 MB 🚨 +1 KB 🚨
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 57 57 0
Self size 715 KB 833 KB 🚨 +118 KB 🚨
Dependency size 12.92 MB 12.92 MB 🚨 +4 KB 🚨
Bundle Size Analyzer Link Link

@storybook/vue3

Before After Difference
Dependency count 3 3 0
Self size 55 KB 61 KB 🚨 +6 KB 🚨
Dependency size 211 KB 211 KB 🎉 -3 B 🎉
Bundle Size Analyzer Link Link

Copy link
Copy Markdown
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome. Great stuff!!! 🚀

@shilman shilman merged commit 07dca72 into storybookjs:next Nov 9, 2025
44 of 59 checks passed
@github-actions github-actions Bot mentioned this pull request Nov 9, 2025
12 tasks
@shilman shilman added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Nov 16, 2025
@github-actions github-actions Bot mentioned this pull request Nov 16, 2025
7 tasks
ndelangen pushed a commit that referenced this pull request Nov 17, 2025
…rall-improvements

React Native Web: Update vite-plugin-rnw for overall improvements

(cherry picked from commit 07dca72)
@github-actions github-actions Bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Nov 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:normal maintenance User-facing maintenance tasks patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch react-native-web

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants