Storybook启用Import Names类型修饰符后启动崩溃求助

问题根源 #

Storybook内置的Babel解析器未启用对TypeScript 4.5+ type 导入语法的支持，导致解析失败。

具体解决步骤 #

1. 配置Babel识别类型导入 #

在项目根目录新建或修改.babelrc/babel.config.json，添加TypeScript预设并开启类型导入支持：

{
  "presets": [
    ["@babel/preset-typescript", { "onlyRemoveTypeImports": true }],
    "@babel/preset-react"
  ]
}

onlyRemoveTypeImports参数能让Babel正确识别type FocusEventHandler这类语法，不会把它当成普通变量导入处理。

2. 强制Storybook使用项目本地的TypeScript #

Storybook可能自带旧版TypeScript，在.storybook/main.js/.storybook/main.ts里添加配置，指定使用项目本地的TS版本和配置：

module.exports = {
  typescript: {
    check: false,
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: true,
        esModuleInterop: true,
      },
      tsconfigPath: '../tsconfig.json', // 指向项目根目录的tsconfig
    },
  },
};

同时确保项目的tsconfig.json里启用了TS 4.5+的必要配置：

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020",
    "moduleResolution": "NodeNext",
    "importsNotUsedAsValues": "error",
    "preserveValueImports": true
  }
}

3. 升级Babel相关依赖 #

安装最新版的Babel核心和TypeScript预设，保证版本兼容：

npm install --save-dev @babel/core@latest @babel/preset-typescript@latest

如果用的是Webpack 4的builder，建议切换到Webpack 5（Storybook v7默认使用该版本），在.storybook/main.js里修改：

module.exports = {
  core: {
    builder: '@storybook/builder-webpack5',
  },
};

然后安装对应依赖：

npm install --save-dev @storybook/builder-webpack5 @storybook/manager-webpack5

4. 清除缓存重启 #

最后清除Storybook缓存再启动，避免旧配置残留：

npx storybook dev --no-manager-cache

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