使用viteFinal()运行Storybook时出现404错误

我有一个配置了proxy且设置changeOrigin: true的vite.config.ts，尝试将React项目的Vite配置与Storybook合并时，出现请求http://localhost:6006/@id/__x00__/@id/__x00__virtual:/@storybook/builder-vite/vite-app.js返回404（Not Found）的错误。

相关代码文件 #

.storybook/main.ts #

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
        "@storybook/addon-essentials",
        "@storybook/addon-onboarding",
        "@chromatic-com/storybook",
        "@storybook/experimental-addon-test",
        "@storybook/preset-scss",
        "@storybook/addon-styling-webpack",
    ],
    core: {
        builder: "@storybook/builder-vite",
    },
    framework: {
        name: "@storybook/react-vite",
        options: {},
    },
    async viteFinal(config, { configType }) {
        const { mergeConfig } = await import('vite');

        return mergeConfig(config, {
            ...config,
            server: {
                proxy: {
                    "/api": {
                        target: "http://[sample_url]:[sample_port]",
                        changeOrigin: true,
                        rewrite: (path: string) => {
                            return path.replace(/^\/api/, "");
                        },
                    },
                },
            }
        })
    }
}

export default config;

vite.config.ts #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
    server: {
        // ...与上述proxy配置相同
    },
});

已尝试但未解决的方案 #

• Angular + Vite环境下的Storybook代理配置方案
• Nx 16中React库的Storybook Vite代理配置方案
• 关于iframe.html中找不到virtual:/@storybook/builder-vite/vite-app.js文件的问题排查方案
• Vite无法找到ESLint配置的相关修复方案

解决方案 #

问题根源 #

1. viteFinal中错误地展开原config后再合并，导致Vite内部虚拟模块路径被代理规则意外拦截，触发404
2. @storybook/addon-styling-webpack是Webpack环境插件，与Vite builder冲突，引发加载异常

修复步骤 #

1. 移除冲突插件
   从addons列表中删除@storybook/addon-styling-webpack，替换为Vite兼容的@storybook/addon-styling（若需要样式支持）。

2. 修正配置合并逻辑
   直接复用项目根目录的Vite配置，避免覆盖Storybook内部配置：

   async viteFinal(config, { configType }) {
       const { mergeConfig } = await import('vite');
       // 导入项目原有Vite配置
       const viteConfig = await import('../vite.config.ts').then(m => m.default);
   
       return mergeConfig(config, {
           server: {
               proxy: viteConfig.server.proxy
           },
           resolve: {
               alias: viteConfig.resolve.alias
           }
       });
   }
   

3. 清理缓存重启
   删除缓存目录后重新启动Storybook：

   rm -rf node_modules/.cache
   npm run storybook
   

内容的提问来源于stack exchange，提问作者hokwanhung