Revert to Webpack for storybook (#3718)

Author: chaance

apps/storybook/.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from '@storybook/react-vite';
+import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
   stories: [
@@ -9,14 +9,28 @@ const config: StorybookConfig = {
   features: {
     experimentalRSC: true,
   },
-  addons: ['@storybook/addon-docs'],
+  addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-docs'],
   framework: {
-    name: '@storybook/react-vite',
+    name: '@storybook/react-webpack5',
     options: {
       builder: {},
       // enable React strict mode
       strictMode: true,
     },
   },
+
+  swc: (config: any) => ({
+    ...config,
+    jsc: {
+      ...config?.jsc,
+      transform: {
+        ...config?.jsc?.transform,
+        react: {
+          // Do not require importing React into scope to use JSX
+          runtime: 'automatic',
+        },
+      },
+    },
+  }),
 };
 export default config;

apps/storybook/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react-vite';
+import type { Preview } from '@storybook/react-webpack5';
 import './preview.css';
 
 const preview: Preview = {

apps/storybook/package.json

@@ -24,17 +24,15 @@
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@storybook/addon-docs": "^9.1.15",
-    "@storybook/addon-vitest": "^9.1.15",
-    "@storybook/react-vite": "^9.1.15",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
+    "@storybook/react-webpack5": "^9.1.15",
     "@types/form-serialize": "^0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "eslint": "^9.38.0",
     "eslint-plugin-storybook": "^9.1.15",
     "serve": "^14.2.5",
     "storybook": "^9.1.15",
-    "typescript": "^5.9.3",
-    "vite": "^7.1.12",
-    "vitest": "^3.1.1"
+    "typescript": "^5.9.3"
   }
 }

apps/storybook/stories/one-time-password-field.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { unstable_OneTimePasswordField as OneTimePasswordField, Separator } from 'radix-ui';
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import dialogStyles from './dialog.stories.module.css';
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within, expect } from 'storybook/test';
 import styles from './one-time-password-field.stories.module.css';
 

apps/storybook/stories/password-toggle-field.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useArgs } from 'storybook/preview-api';
 import { unstable_PasswordToggleField as PasswordToggleField } from 'radix-ui';
 import styles from './password-toggle-field.stories.module.css';

apps/storybook/stories/slot.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Slot } from 'radix-ui';
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 export default { title: 'Utilities/Slot' } satisfies Meta<typeof Slot.Root>;