Monorepo+React环境下Storybook加载包内stories报错求助

以下是针对该问题的具体解决步骤：

1. 配置TypeScript路径映射 #

在根目录tsconfig.json中添加路径映射，让TypeScript和Storybook能正确解析工作区内的模块：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@your-scope/react/*": ["packages/react/*/src"] // 替换为你的自定义前缀或包结构
    },
    // 保留原有其他配置
  },
  "include": ["src", "packages"] // 确保包含packages目录
}

2. 扩展Storybook的Webpack配置 #

修改.storybook/main.ts，添加webpackFinal配置，让Webpack能处理工作区包的编译：

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

const config: StorybookConfig = {
  stories: [
    '../packages/**/*.stories.@(js|jsx|ts|tsx)', // 扩展为匹配所有packages下的stories
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-interactions',
    '@storybook/addon-storysource',
    '@storybook/addon-mdx-gfm',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
  // 添加Webpack自定义配置
  webpackFinal: async (config) => {
    // 将packages目录加入模块解析路径
    config.resolve?.modules?.push(path.resolve(__dirname, '../packages'));

    // 让TypeScript loader处理packages下的文件
    config.module?.rules?.push({
      test: /\.(ts|tsx)$/,
      include: [path.resolve(__dirname, '../packages')],
      use: [
        {
          loader: 'ts-loader',
          options: {
            configFile: path.resolve(__dirname, '../tsconfig.json'),
            transpileOnly: true,
          },
        },
      ],
    });

    // 调整Create React App preset的配置，避免路径限制冲突
    const craPreset = config.addons?.find(addon => 
      typeof addon === 'object' && addon.name === '@storybook/preset-create-react-app'
    );
    if (craPreset) {
      (craPreset as any).options = {
        ...(craPreset as any).options,
        craOverrides: {
          fileLoaderExcludes: ['jsx', 'ts', 'tsx'],
        },
      };
    }

    return config;
  },
};

export default config;

3. 验证工作区依赖配置 #

确保每个packages下的子包都有自己的package.json，并且核心依赖（如react、typescript）在根目录或子包中正确声明，Yarn 3会自动处理工作区包的链接，无需手动执行link命令。

4. 清除缓存并重启服务 #

执行以下命令清除缓存，确保所有配置生效：

yarn cache clean
yarn storybook dev --no-manager-cache -p 6006

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