Create React App项目运行Storybook报baseUrl配置错误如何解决？

问题根因 #

该报错是Create React App（CRA）内置的tsconfig校验规则触发的：CRA限制baseUrl仅支持src或node_modules两个取值，而Storybook默认会复用项目的CRA配置和全局tsconfig设置，因此你自定义的baseUrl: ./app会触发校验失败。你之前参考的旧版解决方案仅适配6.0以下的旧版Storybook，新版本配置入口已调整因此不生效。

可行解决方案 #

方案1：最小改动适配（无需调整原有业务代码导入逻辑）

1. 在项目根目录的.storybook配置文件夹下，新增独立的tsconfig.json文件，单独给Storybook使用，内容如下：

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

2. 打开.storybook/main.js配置文件，修改@storybook/preset-create-react-app预设的配置，指定Storybook使用单独的tsconfig，绕过全局CRA校验：

const path = require('path');

module.exports = {
  stories: [/* 你的原有stories配置保持不变 */],
  addons: [
    // 其他原有addon保持不变，找到@storybook/preset-create-react-app的配置，修改为如下格式
    {
      name: '@storybook/preset-create-react-app',
      options: {
        forkTsCheckerWebpackPluginOptions: {
          tsconfig: path.resolve(__dirname, './tsconfig.json')
        }
      }
    }
  ],
  // 追加webpack模块解析配置，保证导入路径解析正常
  webpackFinal: async (config) => {
    config.resolve.modules = [
      ...config.resolve.modules,
      path.resolve(__dirname, '../app')
    ];
    return config;
  }
}

3. 保留你项目根目录原有tsconfig.json的baseUrl: ./app配置即可，无需修改业务代码。

方案2：适配CRA规则（长期维护更稳定）

如果可以接受小范围调整配置，按照CRA的规范修改全局tsconfig，无需单独给Storybook做定制：

• 将根目录tsconfig.json的baseUrl修改为CRA支持的"src"
• 新增paths配置，映射所有导入路径到根目录下的app文件夹，示例：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["../app/*", "*"]
    }
  }
}

该配置既符合CRA的校验规则，也能保证原有import 'components/xxx'这类绝对导入逻辑正常生效，无需修改业务代码，Storybook可以直接复用该配置无需额外调整。

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