从零配置Storybook与Webpack绝对导入出现路径解析异常问题

报错原因 #

你在tsconfig中配置的baseUrl仅作用于TypeScript编译阶段，Storybook默认的Webpack打包配置不会自动同步该路径规则，因此Webpack解析绝对路径时会优先到node_modules中查找对应模块，最终触发找不到文件的报错。

方案1：无额外依赖，直接配置Webpack模块查找路径 #

找到项目根目录下.storybook/main.js（若为TypeScript配置则对应main.ts），新增webpackFinal配置项即可：

const path = require('path');

module.exports = {
  // 此处保留你原本的Storybook配置（stories、addons等字段无需修改）
  webpackFinal: async (config) => {
    // 将src目录加入Webpack的模块查找路径，与tsconfig的baseUrl配置匹配
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../src')
    ];
    return config;
  }
};

配置完成后重启Storybook即可生效。

方案2：通过插件自动同步tsconfig路径配置 #

如果项目后续会频繁调整tsconfig的路径规则，可以使用插件自动同步配置，避免多次修改Storybook配置：

1. 安装依赖包

npm install tsconfig-paths-webpack-plugin --save-dev
# Yarn用户执行：yarn add tsconfig-paths-webpack-plugin -D
# PNPM用户执行：pnpm add tsconfig-paths-webpack-plugin -D

2. 修改.storybook/main.js配置

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

module.exports = {
  // 此处保留你原本的Storybook配置
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        // 指定项目tsconfig文件路径
        configFile: './tsconfig.json',
        extensions: config.resolve.extensions
      })
    ];
    return config;
  }
};

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