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

code/frameworks/react-native-web-vite/package.json

@@ -53,12 +53,15 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.26.3",
+    "@babel/preset-react": "^7.26.3",
     "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/react-vite": "workspace:*",
     "@vitejs/plugin-react": "^4.3.2",
+    "vite-plugin-babel": "^1.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "devDependencies": {

code/frameworks/react-native-web-vite/src/preset.ts

@@ -3,6 +3,7 @@ import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset';
 import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow';
 import react from '@vitejs/plugin-react';
 import type { InlineConfig, PluginOption } from 'vite';
+import babel from 'vite-plugin-babel';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 import type { FrameworkOptions, StorybookConfig } from './types';
@@ -64,25 +65,68 @@ export function reactNativeWeb(): PluginOption {
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
   const { mergeConfig } = await import('vite');
 
-  const { pluginReactOptions = {} } =
+  const { pluginReactOptions = {}, pluginBabelOptions = {} } =
     await options.presets.apply<FrameworkOptions>('frameworkOptions');
 
+  const isDevelopment = options.configType !== 'PRODUCTION';
+
   const reactConfig = await reactViteFinal(config, options);
 
   const { plugins = [] } = reactConfig;
 
   plugins.unshift(
     tsconfigPaths(),
+
+    // fix for react native packages shipping with flow types untranspiled
     flowPlugin({
       exclude: [/node_modules\/(?!react-native|@react-native)/],
     }),
     react({
+      ...pluginReactOptions,
+      jsxRuntime: pluginReactOptions.jsxRuntime || 'automatic',
       babel: {
         babelrc: false,
         configFile: false,
+        ...pluginReactOptions.babel,
+      },
+    }),
+
+    // we need to add this extra babel config because the react plugin doesn't allow
+    // for transpiling node_modules. We need this because many react native packages are un-transpiled.
+    // see this pr for more context: https://github.com/vitejs/vite-plugin-react/pull/306
+    // However we keep the react plugin to get the fast refresh and the other stuff its doing
+    babel({
+      ...pluginBabelOptions,
+      include: pluginBabelOptions.include || [/node_modules\/(react-native|@react-native)/],
+      exclude: pluginBabelOptions.exclude,
+      babelConfig: {
+        ...pluginBabelOptions.babelConfig,
+        babelrc: false,
+        configFile: false,
+        presets: [
+          [
+            '@babel/preset-react',
+            {
+              development: isDevelopment,
+              runtime: 'automatic',
+              ...(pluginBabelOptions.presetReact || {}),
+            },
+          ],
+          ...(pluginBabelOptions.babelConfig?.presets || []),
+        ],
+        plugins: [
+          [
+            // this is a fix for reanimated not working in production
+            '@babel/plugin-transform-modules-commonjs',
+            {
+              strict: false,
+              strictMode: false, // prevent "use strict" injections
+              allowTopLevelThis: true, // dont rewrite global `this` -> `undefined`
+            },
+          ],
+          ...(pluginBabelOptions.babelConfig?.plugins || []),
+        ],
       },
-      jsxRuntime: 'automatic',
-      ...pluginReactOptions,
     })
   );
 
@@ -91,6 +135,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
   return mergeConfig(reactConfig, {
     optimizeDeps: {
       esbuildOptions: {
+        // fix for react native packages shipping with flow types untranspiled
         plugins: [esbuildFlowPlugin(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')],
       },
     },

code/frameworks/react-native-web-vite/src/types.ts

@@ -6,9 +6,17 @@ import type {
 } from '@storybook/react-vite';
 
 import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react';
+import type { BabelPluginOptions } from 'vite-plugin-babel';
 
 export type FrameworkOptions = FrameworkOptionsBase & {
   pluginReactOptions?: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions };
+  pluginBabelOptions?: BabelPluginOptions & {
+    presetReact?: {
+      [key: string]: any;
+      runtime?: 'automatic' | 'classic';
+      importSource?: string;
+    };
+  };
 };
 
 type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;

code/yarn.lock

@@ -508,6 +508,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-annotate-as-pure@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-annotate-as-pure@npm:7.25.9"
+  dependencies:
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10c0/095b6ba50489d797733abebc4596a81918316a99e3632755c9f02508882912b00c2ae5e468532a25a5c2108d109ddbe9b7da78333ee7cc13817fc50c00cf06fe
+  languageName: node
+  linkType: hard
+
 "@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.24.7"
@@ -1064,6 +1073,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-syntax-jsx@npm:7.25.9"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/d56597aff4df39d3decda50193b6dfbe596ca53f437ff2934622ce19a743bf7f43492d3fb3308b0289f5cee2b825d99ceb56526a2b9e7b68bf04901546c5618c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
@@ -1495,6 +1515,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-commonjs@npm:^7.26.3":
+  version: 7.26.3
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.26.0"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/82e59708f19f36da29531a64a7a94eabbf6ff46a615e0f5d9b49f3f59e8ef10e2bac607d749091508d3fa655146c9e5647c3ffeca781060cdabedb4c7a33c6f2
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.7"
@@ -1689,6 +1721,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-display-name@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.25.9"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/63a0f962d64e71baf87c212755419e25c637d2d95ea6fdc067df26b91e606ae186442ae815b99a577eca9bf5404d9577ecad218a3cf42d0e9e286ca7b003a992
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx-development@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5"
@@ -1700,6 +1743,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx-development@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9"
+  dependencies:
+    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/c0b92ff9eb029620abf320ff74aae182cea87524723d740fb48a4373d0d16bddf5edbe1116e7ba341332a5337e55c2ceaee8b8cad5549e78af7f4b3cfe77debb
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-jsx-self@npm:^7.24.7":
   version: 7.25.9
   resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9"
@@ -1737,6 +1791,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-jsx@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
+    "@babel/helper-module-imports": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/plugin-syntax-jsx": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/5c9947e8ed141f7606f54da3e05eea1074950c5b8354c39df69cb7f43cb5a83c6c9d7973b24bc3d89341c8611f8ad50830a98ab10d117d850e6bdd8febdce221
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-react-pure-annotations@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1"
@@ -1749,6 +1818,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-react-pure-annotations@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.25.9"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/7c8eac04644ad19dcd71bb8e949b0ae22b9e548fa4a58e545d3d0342f647fb89db7f8789a7c5b8074d478ce6d3d581eaf47dd4b36027e16fd68211c383839abc
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1":
   version: 7.24.7
   resolution: "@babel/plugin-transform-regenerator@npm:7.24.7"
@@ -2154,6 +2235,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-react@npm:^7.26.3":
+  version: 7.26.3
+  resolution: "@babel/preset-react@npm:7.26.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-validator-option": "npm:^7.25.9"
+    "@babel/plugin-transform-react-display-name": "npm:^7.25.9"
+    "@babel/plugin-transform-react-jsx": "npm:^7.25.9"
+    "@babel/plugin-transform-react-jsx-development": "npm:^7.25.9"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10c0/b470dcba11032ef6c832066f4af5c75052eaed49feb0f445227231ef1b5c42aacd6e216988c0bd469fd5728cd27b6b059ca307c9ecaa80c6bb5da4bf1c833e12
+  languageName: node
+  linkType: hard
+
 "@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/preset-typescript@npm:7.24.1"
@@ -6712,6 +6809,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite"
   dependencies:
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3"
+    "@babel/preset-react": "npm:^7.26.3"
     "@bunchtogether/vite-plugin-flow": "npm:^1.0.2"
     "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2"
     "@storybook/builder-vite": "workspace:*"
@@ -6720,6 +6819,7 @@ __metadata:
     "@types/node": "npm:^22.0.0"
     "@vitejs/plugin-react": "npm:^4.3.2"
     typescript: "npm:^5.3.2"
+    vite-plugin-babel: "npm:^1.3.0"
     vite-tsconfig-paths: "npm:^5.1.4"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -28762,6 +28862,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-babel@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "vite-plugin-babel@npm:1.3.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+    vite: ^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+  checksum: 10c0/1613c45ee220ffbad18aeacbbe395d4d346cbe7c971c7469b0cd96df422bd9d617821a40bacf3b6ea3e7c4ded43e6ccdfd17ec3c0899fee2835f56e8971c6b57
+  languageName: node
+  linkType: hard
+
 "vite-plugin-inspect@npm:^0.8.5":
   version: 0.8.5
   resolution: "vite-plugin-inspect@npm:0.8.5"