React-TypeScript项目中Storybook 8.2.2绝对路径导入失效问题

我在现有React-TypeScript项目中集成Storybook 8.2.2，项目所有导入均使用绝对路径（如src/components/Button）而非相对路径。已经在.storybook/main.ts配置webpackFinal添加src目录到模块搜索路径，同时tsconfig.json设置了baseUrl: "."，但仍出现模块找不到的错误。

相关代码 #

Button.stories.ts #

import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'

import Button from 'src/components/cta/button/Button'

const meta = {
  title: 'Example/CustomButton',
  component: Button,
  parameters: {
    layout: 'centered'
  },
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' }
  },
  args: { onClick: fn() }
} satisfies Meta<typeof Button>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: {
    label: 'Send Request',
    name: 'create-request-btn',
    type: 'default'
  }
}

.storybook/main.ts #

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

const config: StorybookConfig = {
 webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, '../src')]
    }
    return config
  },
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-onboarding',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },
  staticDirs: ['..\\public']
}
export default config

tsconfig.json（关键配置） #

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

错误信息 #

ERROR in ./src/stories/Button.stories.ts
Module not found: Error: Can't resolve 'src/components/cta/button/Button' in 'C:\Users\user\Projects\storybook-fe\src\stories'

解决方法 #

1. 完善Webpack的路径解析配置 #

当前的webpackFinal只添加了模块搜索目录，还需要配置别名映射确保Webpack能正确识别src/开头的路径。修改.storybook/main.ts中的webpackFinal部分：

webpackFinal: async (config) => {
  if (config.resolve) {
    // 把项目根目录加入模块搜索路径
    config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, '../')];
    // 添加src别名映射
    config.resolve.alias = {
      ...config.resolve.alias,
      'src': path.resolve(__dirname, '../src')
    };
  }
  return config;
},

2. 为Storybook单独配置TypeScript路径 #

在.storybook目录下新建tsconfig.json，继承根目录的配置并明确路径映射，让TypeScript能正确解析绝对路径：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "../",
    "paths": {
      "src/*": ["src/*"]
    }
  },
  "include": ["../src/**/*", "./**/*"]
}

3. 处理CRA预设的冲突 #

如果使用了@storybook/preset-create-react-app，它可能会覆盖自定义的Webpack配置。可以尝试调整addons的顺序，或者如果项目不需要依赖CRA的预设，直接移除该addon。

4. 清理缓存后重启Storybook #

运行以下命令清理Storybook缓存，避免旧配置影响：

npx storybook build --clean
npm run storybook

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