merge rnw preset changes

storybookjs · Jan 8, 2025 · 3c0886b · 3c0886b
1 parent 7c95fe0
commit 3c0886b
Showing 1 changed file with 44 additions and 3 deletions.
diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts
@@ -70,21 +70,62 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
 
   const isDevelopment = options.configType !== 'PRODUCTION';
 
-  const reactConfig = await reactViteFinal(config, options);
+  const { plugins = [], ...reactConfigWithoutPlugins } = await reactViteFinal(config, options);
 
   return mergeConfig(reactConfigWithoutPlugins, {
     plugins: [
       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,
       }),
       ...plugins,
       reactNativeWeb(),