Migrate to Vite

Author: pimterry

.babelrc.json

@@ -31,4 +31,6 @@ node_modules/
 
 # Build output:
 dist/
-examples/
+examples/
+
+*.tsbuildinfo

.gitignore

@@ -2,7 +2,7 @@ module.exports = {
   stories: ['../stories/**/*.stories.@(js|jsx|tsx)'],
   addons: ['@storybook/addon-docs'],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {
@@ -12,29 +12,14 @@ module.exports = {
     check: true,
     reactDocgen: false,
   },
-  webpackFinal: async (config) => {
-    const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+  async viteFinal(config) {
+    const { default: checker } = await import('vite-plugin-checker');
 
-    // Ensure babel-loader processes story files
-    config.module.rules.push({
-      test: /\.(ts|tsx|js|jsx)$/,
-      include: /stories/,
-      use: [{
-        loader: require.resolve('babel-loader'),
-        options: {
-          presets: [
-            [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
-            require.resolve('@babel/preset-typescript')
-          ]
-        }
-      }]
-    });
-
-    // Add TypeScript type checking
+    config.plugins = config.plugins || [];
     config.plugins.push(
-      new ForkTsCheckerWebpackPlugin({
+      checker({
         typescript: {
-          configFile: require('path').resolve(__dirname, '../stories/tsconfig.json'),
+          tsconfigPath: './stories/tsconfig.json',
         },
       })
     );

.storybook/main.js

@@ -39,24 +39,21 @@
   },
   "homepage": "https://github.com/httptoolkit/react-reverse-portal#readme",
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
     "@storybook/addon-docs": "^9.1.10",
-    "@storybook/preset-react-webpack": "^9.1.10",
     "@storybook/react": "^9.1.10",
-    "@storybook/react-webpack5": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
     "@types/events": "^3.0.0",
     "@types/node": "^24.6.2",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
-    "babel-loader": "^8.0.6",
-    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "@vitejs/plugin-react": "^5.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^3.0.0",
     "storybook": "^9.1.10",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.1.8",
+    "vite-plugin-checker": "^0.11.0"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

package.json

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});