Webpack 5处理ts/tsx时遇babel-loader TypeError错误求助

问题场景 #

配置Webpack 5处理TS/TSX文件时，遇到如下错误：

ERROR in ./ReactScripts/AppRoot.tsx Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: loaderUtils.getOptions is not a function

项目中/ReactScripts目录存放React的TSX/TS文件，/Content目录存放其他TS文件，已确认所有依赖包均为最新版本。

错误原因 #

该错误核心是babel-loader v8+版本已弃用loaderUtils.getOptions方法，当前依赖版本不兼容，或Webpack loader配置顺序、Babel/Tsconfig配置存在冲突。

解决方案 #

1. 调整babel-loader与核心依赖版本匹配 #

• 确保babel-loader和@babel/core版本对应：babel-loader@8.x搭配@babel/core@7.x，babel-loader@9.x搭配@babel/core@8.x
• 若手动安装过loader-utils，直接卸载：

  npm uninstall loader-utils
  # 或 yarn remove loader-utils
  

  babel-loader v8+已内置相关功能，无需单独依赖loader-utils。

2. 修正Webpack loader执行顺序 #

当前配置中先执行babel-loader再执行ts-loader，但正确顺序应为先由ts-loader转译TS/TSX为JS，再由babel-loader处理JS语法兼容性。修改webpack.config.ts中的loader规则：

{
    test: /\.ts(x)$/,
    include: [
        path.resolve(__dirname, "Content"),
        path.resolve(__dirname, "./ReactScripts"),
    ],
    exclude: /node_modules/,
    use: [
        // 先执行ts-loader转译TS
        {
            loader: "ts-loader",
            options: {
                transpileOnly: true,
                experimentalWatchApi: true
            }
        },
        // 再执行babel-loader做语法降级
        'babel-loader'
    ],
}

3. 优化Babel与TypeScript配置 #

升级corejs版本

corejs 2已停止维护，将.babelrc中的corejs改为3，并安装对应依赖：

npm install @babel/runtime-corejs3
# 或 yarn add @babel/runtime-corejs3

更新后的.babelrc关键配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false, // Webpack 5原生支持ES模块，无需转成commonjs
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ],
    "@babel/preset-react"
  ],
  // 其他插件配置保持不变
}

调整TSConfig的JSX编译选项

将tsconfig.json中的jsx设置为react-jsx（适配React 17+自动导入）或react，替代preserve：

{
  "compilerOptions": {
    // ...其他配置
    "jsx": "react-jsx"
  }
}

4. 清理缓存并重装依赖 #

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重装依赖
npm install

验证 #

重新运行Webpack构建命令，查看错误是否消除。

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