RNW-Vite: Fix reanimated support with babel plugin for node_modules

[dannyhw]

Closes #

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 pull request has been released as version 0.0.0-pr-30188-sha-30f73684. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-30188-sha-30f73684
Triggered by	@shilman
Repository	storybookjs/storybook
Branch	danny/fix-rnw-transpile-node-modules
Commit	30f73684
Datetime	Mon Jan 6 17:36:12 UTC 2025 (1736184972)
Workflow run	12637366784

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=30188

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.8 MB	77.8 MB	-3.23 kB	0.81	0%
initSize	131 MB	131 MB	-2.92 kB	-1.01	0%
diffSize	53 MB	53 MB	304 B	-1.01	0%
buildSize	7.19 MB	7.19 MB	0 B	-0.63	0%
buildSbAddonsSize	1.85 MB	1.85 MB	0 B	-0.63	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	0.4	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	0 B	-0.63	0%
buildPreviewSize	3.28 MB	3.28 MB	0 B	-	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	24.8s	20.7s	-4s -123ms	1.35	🔰-19.9%
generateTime	18.5s	21.6s	3.1s	0.98	14.4%
initTime	11.9s	14.2s	2.2s	0.26	16.2%
buildTime	8.7s	8s	-681ms	-1.08	-8.4%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.5s	4.7s	183ms	-0.8	3.9%
devManagerResponsive	3.3s	3.3s	-44ms	-1.12	-1.3%
devManagerHeaderVisible	574ms	559ms	-15ms	-0.74	-2.7%
devManagerIndexVisible	608ms	567ms	-41ms	-0.88	-7.2%
devStoryVisibleUncached	2s	2s	30ms	0.11	1.4%
devStoryVisible	609ms	614ms	5ms	-0.59	0.8%
devAutodocsVisible	543ms	506ms	-37ms	-0.8	-7.3%
devMDXVisible	515ms	635ms	120ms	0.56	18.9%
buildManagerHeaderVisible	549ms	571ms	22ms	-0.53	3.9%
buildManagerIndexVisible	647ms	658ms	11ms	-0.58	1.7%
buildStoryVisible	534ms	553ms	19ms	-0.57	3.4%
buildAutodocsVisible	483ms	418ms	-65ms	-1.19	-15.6%
buildMDXVisible	521ms	429ms	-92ms	-0.91	-21.4%

Greptile Summary

Added Babel plugin configuration to handle untranspiled React Native modules in node_modules when using Vite, ensuring proper transpilation of React Native Web components.

• Added vite-plugin-babel with custom configuration in code/frameworks/react-native-web-vite/src/preset.ts to handle node_modules transpilation
• Added new pluginBabelOptions type in types.ts for configuring Babel preset options
• Added @babel/plugin-transform-modules-commonjs to fix reanimated production issues
• Added specific include patterns for React Native packages in Babel configuration

_{💡 (4/5) You can add custom instructions or style guidelines for the bot here!}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 30f7368.

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

---

☁️ Nx Cloud last updated this comment at 2025-01-05 14:29:17 UTC

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 30f7368, ran on 5 January 2025 at 14:33:57 UTC}

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

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	105	114	🚨 +9 🚨
Self size	42 KB	43 KB	🚨 +1 KB 🚨
Dependency size	18.03 MB	18.22 MB	🚨 +185 KB 🚨
Bundle Size Analyzer	Link	Link

[greptile-apps]

_{3 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}