React项目中@mediapipe/tasks-vision编译错误，如何解决？

问题重现 #

编译时出现如下错误：

Failed to compile.
./node_modules/@mediapipe/tasks-vision/vision_bundle.mjs 30:18
Module parse failed: Unexpected token (30:18)
File was processed with these loaders:

• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  |
  | function c(t) {

if (h) t = (a ||= new TextEncoder()).encode(t);else {
| let n = 0;
| const r = new Uint8Array(3 * t.length);

当前配置文件及依赖：

• webpack.config.js：

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

• .babelrc：

// .babelrc
{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
    ]
  }

• 已安装依赖：npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

原因分析 #

报错中的||=是ES2021新增的逻辑赋值运算符，当前webpack配置中exclude: /node_modules/导致@mediapipe/tasks-vision模块未经过babel转译，而该模块源码使用了未兼容低版本环境的新语法，最终导致babel-loader无法解析。

解决方案 #

1. 修改webpack配置，让babel处理@mediapipe/tasks-vision模块 #

修改webpack.config.js中的排除规则，保留node_modules排除但例外处理目标模块：

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx)$/,
        // 排除node_modules，但对@mediapipe/tasks-vision例外
        exclude: /node_modules(?!\/@mediapipe\/tasks-vision)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

2. 优化@babel/preset-env配置（可选但推荐） #

更新.babelrc，确保preset-env能正确转译ES2021语法：

// .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-react"
  ]
}

注：若未安装corejs，需执行npm install corejs@3 --save

3. 重新执行编译 #

运行项目启动或构建命令：

npm start # 或 npm run build

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