AstroturfLoaderError构建失败：TypeScript泛型语法报错求助

根本原因 #

错误出现在解析TypeScript泛型类语法时，Astroturf的loader内部调用Babel解析代码，但未正确启用TypeScript语法支持。具体问题点：

• Webpack loader执行顺序导致Astroturf先处理包含TS语法的.js文件，此时Babel还未完成TS转译，解析器无法识别泛型<>语法
• Astroturf loader默认未加载项目的Babel配置（包含@babel/preset-typescript），导致解析TS语法失败

可行解决方法 #

方法1：调整Webpack Loader执行顺序 #

Webpack loader按从右到左的顺序执行，需要让babel-loader先处理文件（转译TS语法），再交给astroturf/loader处理样式。修改webpack.rules.js中的规则：

{
  test: /\.jsx?$/,
  exclude: /(node_modules|\.webpack)/,
  use: [
    {
      loader: 'astroturf/loader',
      options: { extension: '.module.scss' },
    },
    'babel-loader' // 让babel-loader先执行，转译TS后再交给astroturf
  ],
}

方法2：为Astroturf Loader指定Babel配置 #

让Astroturf在解析时启用TypeScript支持，直接在loader配置中传入Babel预设：

{
  test: /\.jsx?$/,
  exclude: /(node_modules|\.webpack)/,
  use: [
    'babel-loader',
    {
      loader: 'astroturf/loader',
      options: {
        extension: '.module.scss',
        babel: {
          presets: ['@babel/preset-typescript', '@babel/preset-react', '@babel/preset-env']
        }
      },
    }
  ],
}

方法3：规范文件后缀 #

将包含TypeScript语法的.js文件重命名为.ts/.tsx，并在Webpack中添加专门的TS处理规则：

// 添加TS文件规则
{
  test: /\.tsx?$/,
  exclude: /(node_modules|\.webpack)/,
  use: [
    {
      loader: 'astroturf/loader',
      options: { extension: '.module.scss' },
    },
    'babel-loader',
    'ts-loader'
  ]
}

方法4：版本兼容性调整 #

Astroturf v1.2.0与Babel v7.22.x可能存在兼容性问题，尝试升级Astroturf到最新稳定版：

npm install astroturf@latest --save-dev

或降级Babel到兼容版本（如v7.20.x）：

npm install @babel/core@^7.20.0 @babel/preset-typescript@^7.20.0 --save-dev

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