如何解决Storybook中TypeScript导入路径不能带.ts扩展名的报错

1. 调整tsconfig.json基础配置 #

首先保证TypeScript本身的模块解析规则符合预期，打开项目根目录的tsconfig.json，确认compilerOptions下存在以下配置：

{
  "compilerOptions": {
    "moduleResolution": "node", // TS 5+ 版本可设置为 "bundler"
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    // 如果使用 src/ 开头的绝对导入，需新增paths配置
    "paths": {
      "src/*": ["./src/*"]
    }
  }
}

以上配置可以保证VSCode的TypeScript智能提示正常工作。

2. 配置Storybook的模块后缀自动解析规则 #

根据你使用的Storybook构建工具（Webpack/Vite）选择对应的配置：

2.1 Webpack 构建的Storybook #

打开.storybook/main.ts（或.js）文件，新增webpackFinal配置项，手动添加.ts、.tsx后缀的解析规则：

const path = require('path');

module.exports = {
  // 保留你现有的stories、addons等配置不变
  webpackFinal: async (config) => {
    // 新增可自动解析的后缀
    config.resolve.extensions.push('.ts', '.tsx', '.js', '.jsx');
    // 如果使用src/开头的绝对导入，新增别名配置
    config.resolve.alias = {
      ...config.resolve.alias,
      'src': path.resolve(__dirname, '../src')
    };
    return config;
  }
};

2.2 Vite 构建的Storybook #

打开.storybook/main.ts文件，新增viteFinal配置项：

import { mergeConfig } from 'vite';
const path = require('path');

module.exports = {
  // 保留你现有的stories、addons等配置不变
  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        // 新增可自动解析的后缀
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
        // 如果使用src/开头的绝对导入，新增别名配置
        alias: {
          'src': path.resolve(__dirname, '../src')
        }
      }
    });
  }
};

配置修改完成后需要完全重启Storybook开发服务，新的解析规则才会生效。

完成以上操作后即可直接使用import defaultTheme from 'src/theme'的形式正常导入模块，不会再出现扩展名报错，也不会破坏VSCode的TypeScript智能提示。

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