Storybook 7.2.1无法读取独立文件定义的GlobalVariables常量问题

首先明确：你添加的staticDirs配置没用是因为这个选项是用来指定静态资源（比如图片、静态JSON）目录的，根本不是用来处理TS模块导入的，方向错了。下面是几个实际可行的解决步骤：

• 检查导入路径是否正确
  先确认你的组件或Story文件里导入GlobalVariables的路径有没有写错。如果是通过src/constant/index.ts导出的，导入代码应该是类似这样的（根据文件层级调整相对路径）：

  import { GlobalVariables } from '../constant';
  

  别用绝对路径，除非你已经配置了路径别名且Storybook能识别。

• 配置路径别名（如果项目用了的话）
  如果你的React项目在tsconfig.json里配置了路径别名（比如"@/constant/*": ["src/constant/*"]），Storybook默认不会识别，得手动在.storybook/main.js里加webpack配置：

  const path = require('path');
  const config: StorybookConfig = {
    // 其他已有配置
    webpackFinal: async (config) => {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
      return config;
    },
  };
  export default config;
  

• 确认TS文件被正确处理
  检查.storybook/main.js里的stories配置，确保包含TS/TSX格式的Story文件：

  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  

  要是之前没装@storybook/preset-typescript，可以装一下（虽然Storybook7自带TS支持，但重装能排除依赖问题）：

  npm install @storybook/preset-typescript --save-dev
  

• 清缓存重启
  缓存经常搞事情，执行清缓存命令再重启Storybook：

  npx storybook build --clean
  npm run storybook
  

  或者直接删掉node_modules/.cache/storybook目录也行。

• 检查index.ts的导出
  最后确认src/constant/index.ts里确实正确导出了GlobalVariables：

  import { GlobalVariables } from './global.variables';
  export { GlobalVariables };
  // 或者用export * from './global.variables';
  

内容的提问来源于stack exchange，提问作者Ala Ben Aicha