如何让Storybook识别React项目中与TypeScript paths匹配的Webpack别名

这个问题我之前也碰到过——Storybook自带独立的Webpack配置，不会自动同步你项目里tsconfig.json中compilerOptions.paths的配置，所以才会出现模块找不到的错误。下面给你两种靠谱的解决方法：

方法一：自动同步tsconfig路径（推荐） #

这种方式用插件自动读取tsconfig.json的路径规则，不用手动重复配置，后续维护起来更省心。

1. 安装依赖插件
   在项目根目录运行命令：

npm install tsconfig-paths-webpack-plugin --save-dev
# 用yarn的话执行这个
yarn add tsconfig-paths-webpack-plugin -D

2. 修改Storybook配置文件
   找到项目中的.storybook/main.js（TypeScript项目则是.storybook/main.ts），更新配置如下：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // 保留你原有的Storybook配置（比如stories、addons等）
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  
  // 扩展Webpack配置
  webpackFinal: async (config) => {
    // 加入tsconfig路径解析插件
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        configFile: '../tsconfig.json', // 注意路径匹配你的项目结构，若.storybook在子目录需调整
      }),
    ];
    
    return config;
  },
};

方法二：手动配置Webpack别名 #

如果不想额外安装插件，也可以手动把tsconfig.json里的路径转换成Webpack能识别的别名：

1. 修改.storybook/main.js

const path = require('path');

module.exports = {
  // 保留原有Storybook配置
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  
  webpackFinal: async (config) => {
    // 手动添加别名，和tsconfig里的paths一一对应
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, '../src/components'),
      '@utils': path.resolve(__dirname, '../src/utils'),
      // 这里添加你所有需要的路径别名
    };
    
    return config;
  },
};

收尾步骤 #

保存配置后，重启你的Storybook服务（如果之前处于运行状态），再检查组件中的路径别名应该就能正常解析了。

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