Gatsby项目中Storybook从Webpack迁移至Vite遇问题求助

核心问题分析 #

1. 重复声明错误：手动添加@vitejs/plugin-react会与Storybook内置的React插件冲突，导致React Refresh代码重复注入。
2. 依赖解析错误：方案二中存在路径拼写错误（node-modules→node_modules），且optimizeDeps配置位置错误（应在Vite配置根节点而非resolve内部）。
3. 热更新失效：缓存堆积或配置合并错误导致Vite无法监听文件变化。

步骤1：修正Vite配置（移除冲突插件+正确合并配置） #

删除手动添加的@vitejs/plugin-react，使用Storybook官方的mergeConfig合并配置，避免覆盖默认设置：

const { mergeConfig } = require('@storybook/core-common');
const path = require('path');

// 你的tsconfig路径转换后的别名配置
const aliasPathsVite = {
  // 示例：'@components': path.resolve(__dirname, '../src/components')
};

module.exports = {
  // 其他Storybook基础配置（stories、addons等）
  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        alias: aliasPathsVite,
      },
      optimizeDeps: {
        include: ['react/jsx-runtime', 'react/jsx-dev-runtime'],
      },
      server: {
        hmr: true, // 明确开启热更新
      },
    });
  },
};

步骤2：清理缓存解决热更新与重命名错误 #

执行以下操作彻底清理缓存：

1. 停止Storybook服务
2. 删除node_modules/.vite-storybook目录
3. 重启Storybook服务

步骤3：确认依赖版本与权限 #

• 确保react和react-dom版本≥17（jsx-runtime是React 17+特性）
• 检查项目目录权限，避免Vite无法读写缓存文件（重命名错误通常由权限不足导致）

步骤4：修复CSS导入错误 #

若仍出现CSS解析问题，确保Storybook配置中包含样式处理插件，例如安装并启用@storybook/addon-styling：

npm install @storybook/addon-styling --save-dev

然后在.storybook/main.js的addons数组中添加：

addons: [
  // 其他addons
  '@storybook/addon-styling',
],

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