Storybook Webpack配置报错：stories文件未配置对应Loader

我来帮你搞定这个问题～你遇到的错误是因为加了include路径限制后，你的stories文件没被正确的TypeScript loader处理，导致JSX语法无法解析。下面给你拆解原因和具体的解决办法：

问题出在哪？ #

你通过config.module.rules.push()新增了TS/TSX和SCSS的loader规则，还把include限定在了./base/shared-ui。但Storybook本身自带一套默认的Webpack配置来处理TS/TSX文件，新增的规则要么没覆盖到stories文件的处理，要么路径匹配出了问题——比如你写的path.resolve(__dirname, './base/shared-ui')是不是真的指向了目标目录？另外，awesome-typescript-loader如果没正确读取你的TS配置，也会搞不定JSX语法。

解决方案 #

方案1：修改现有TS/TSX规则，别新增规则 #

别想着加新规则，直接找到Storybook默认的TS/TSX处理规则，修改它的include和loader配置就行，这样不会和默认配置冲突：

const path = require('path');
module.exports = ({ config }) => {
  // 找到默认的TS/TSX处理规则
  const tsRule = config.module.rules.find(rule => 
    rule.test.test('.tsx')
  );

  // 把规则的处理范围限定在shared-ui
  tsRule.include = [path.resolve(__dirname, './base/shared-ui')];
  
  // 更新loader配置，确保能处理JSX（记得指向你的tsconfig文件）
  tsRule.use = [
    { 
      loader: require.resolve('awesome-typescript-loader'),
      options: {
        configFileName: path.resolve(__dirname, '../tsconfig.json') // 这里要对应你项目根目录的tsconfig位置
      }
    },
    { loader: require.resolve('react-docgen-typescript-loader') }
  ];

  // SCSS规则可以直接新增，路径没问题就行
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      require.resolve('style-loader'),
      require.resolve('css-loader'),
      require.resolve('sass-loader'),
    ],
    include: path.resolve(__dirname, './base/shared-ui'),
  });

  config.resolve.extensions.push('.ts', '.tsx', '.scss');
  return config;
};

方案2：调整新增规则的路径，确保stories被覆盖 #

如果你非要新增规则，那得确保路径绝对正确，还要给awesome-typescript-loader配上正确的TS配置，甚至可以显式把stories文件路径加入include（虽然它已经在shared-ui里，但有时候路径解析会抽风）：

const path = require('path');
const sharedUiPath = path.resolve(__dirname, './base/shared-ui');
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      { 
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          configFileName: path.resolve(__dirname, '../tsconfig.json') // 必须指向正确的tsconfig
        }
      },
      { loader: require.resolve('react-docgen-typescript-loader') }
    ],
    include: [
      sharedUiPath,
      // 显式指定stories文件路径，确保被处理
      path.resolve(sharedUiPath, '**/*.stories.tsx')
    ],
  }, {
    test: /\.scss$/,
    use: [
      require.resolve('style-loader'),
      require.resolve('css-loader'),
      require.resolve('sass-loader'),
    ],
    include: sharedUiPath,
  });
  config.resolve.extensions.push('.ts', '.tsx', '.scss');
  return config;
};

最后再检查这两点 #

1. 你的tsconfig.json里，compilerOptions必须设置jsx: "react"（或者react-jsx，看你用的React版本），不然TS没法转译JSX语法。
2. 确认__dirname的指向：如果你的.storybook文件夹在项目根目录，那path.resolve(__dirname, './base/shared-ui')是对的；如果.storybook在别的地方，得调整路径哦。

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