Storybook manager.ts使用别名路径触发模块解析错误

Storybook 的 manager.ts 和 preview.ts 属于两个完全独立的编译上下文：

• preview.ts 是预览层配置文件，会继承你在 .storybook/main.ts 里设置的 webpack/Vite 别名规则；
• manager.ts 是管理界面层配置文件，有独立的构建流程，默认不会读取预览层的别名配置，所以只有它会出现找不到 @ds/theme 的报错。

根据你使用的打包工具（webpack 或 Vite），给 manager 单独配置别名：

如果你用 Webpack #

在 .storybook/main.ts 中添加 managerWebpack 字段，同步预览层的别名配置：

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-webpack5';
import path from 'path';

const config: StorybookConfig = {
  // 你的已有配置（如 stories、addons 等）
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],

  // 预览层的别名配置（你原有的代码）
  webpackFinal: async (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        '@ds/theme': path.resolve(__dirname, '../src/theme'), // 替换为你的实际路径
      },
    };
    return config;
  },

  // 给管理界面层添加相同的别名配置
  managerWebpack: async (config) => {
    config.resolve = {
      ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        '@ds/theme': path.resolve(__dirname, '../src/theme'), // 和预览层保持一致
      },
    };
    return config;
  },
};

export default config;

如果你用 Vite #

在 .storybook/main.ts 中添加 managerVite 字段：

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
import { defineConfig } from 'vite';

const config: StorybookConfig = {
  // 你的已有配置
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],

  // 预览层的别名配置
  viteFinal: async (config) => {
    return defineConfig({
      ...config,
      resolve: {
        alias: {
          '@ds/theme': '../src/theme', // 你的实际路径
        },
      },
    });
  },

  // 管理界面层的别名配置
  managerVite: async (config) => {
    return defineConfig({
      ...config,
      resolve: {
        alias: {
          '@ds/theme': '../src/theme', // 同步预览层别名
        },
      },
    });
  },
};

export default config;

重启 Storybook 服务，manager.ts 中的 @ds/theme 导入即可正常解析。

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