Nuxt 2集成transformers.js遇模块解析错误，求解决方案

问题背景 #

在 Nuxt 2 项目中集成 @xenova/transformers 时，频繁出现模块解析错误，报错显示该包多个源码文件存在无法识别的语法（如 ?? 空值合并操作符、类字段声明、import.meta.url 等），Webpack 提示缺少对应的 loader。已尝试在 nuxt.config.js 中添加部分 Babel 插件配置，但问题未解决。

错误详情 #

ERROR in ./node_modules/@xenova/transformers/src/processors.js 179:46
Module parse failed: Unexpected token (179:46)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.image_std = this.config.image_std;
| 
>         this.resample = this.config.resample ?? 2; // 2 => bilinear
|         this.do_rescale = this.config.do_rescale ?? true;
|         this.rescale_factor = this.config.rescale_factor ?? (1 / 255);
ERROR in ./node_modules/@xenova/transformers/src/tokenizers.js 189:46
Module parse failed: Unexpected token (189:46)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|         /** @type {boolean} Whether to fuse unknown tokens when encoding. Defaults to false. */
>         this.fuse_unk = this.config.fuse_unk ?? false;
|     }
| 
ERROR in ./node_modules/@xenova/transformers/src/models.js 265:49
Module parse failed: Unexpected token (265:49)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|     // Prepare attention mask
>     let pad_token_id = self.config.pad_token_id ?? null;
|     let eos_token_id = self.config.eos_token_id ?? null;
|     if (isIntegralNumber(eos_token_id)) {
ERROR in ./node_modules/@xenova/transformers/src/utils/hub.js 39:22
Module parse failed: Unexpected token (39:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|      * Mapping from file extensions to MIME types.
|      */
>     _CONTENT_TYPE_MAP = {
|         'txt': 'text/plain',
|         'html': 'text/html',
ERROR in ./node_modules/@xenova/transformers/src/env.js 42:56
Module parse failed: Unexpected token (42:56)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const __dirname = RUNNING_LOCALLY
>     ? path.dirname(path.dirname(url.fileURLToPath(import.meta.url)))
|     : './';
| 
ERROR in ./node_modules/@xenova/transformers/src/pipelines.js 482:9
Module parse failed: Unexpected token (482:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| export class Text2TextGenerationPipeline extends Pipeline {
>     _key = null;
| 
|     /**
ERROR in ./node_modules/@xenova/transformers/src/utils/tensor.js 568:43
Module parse failed: Unexpected token (568:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|     // Input image dimensions
>     const in_channels = input.dims.at(-3) ?? 1;
|     const in_height = input.dims.at(-2);
|     const in_width = input.dims.at(-1);
ERROR in ./node_modules/@xenova/transformers/src/utils/image.js 72:22
Module parse failed: Unexpected token (72:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|      * Mapping from file extensions to MIME types.
|      */
>     _CONTENT_TYPE_MAP = {
|         'png': 'image/png',
|         'jpg': 'image/jpeg',
ERROR in ./node_modules/@xenova/transformers/src/configs.js 85:27
Module parse failed: Unexpected token (85:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     } = {}) {
| 
>         let data = config ?? await loadConfig(pretrained_model_name_or_path, {
|             progress_callback,
|             config,

已尝试的 Babel 配置 #

build: {
    babel: {
        plugins: [
            ['@babel/plugin-proposal-private-methods', { loose: true }],
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
        ],
    },
},

可行解决方案 #

方案1：让 Nuxt 对 @xenova/transformers 启用 Babel 转译 #

Nuxt 默认不会转译 node_modules 里的包，需显式指定要转译的包：
在 nuxt.config.js 中添加如下配置：

export default {
  build: {
    // 指定需要转译的依赖包
    transpile: ['@xenova/transformers'],
    babel: {
      presets: [
        // 使用@babel/preset-env处理现代JS语法
        ['@babel/preset-env', { targets: 'defaults' }]
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties',
        '@babel/plugin-proposal-private-methods',
        '@babel/plugin-transform-optional-chaining',
        '@babel/plugin-transform-nullish-coalescing-operator',
        // 处理import.meta.url语法
        '@babel/plugin-transform-modules-commonjs'
      ]
    }
  }
}

执行命令安装对应依赖：

npm install @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-modules-commonjs --save-dev

方案2：使用 Transformers.js 的预构建版本 #

@xenova/transformers 提供了预构建的兼容版本，直接引入构建好的文件即可跳过源码转译：

// 替换原有引入路径
// import { pipeline } from '@xenova/transformers'
import { pipeline } from '@xenova/transformers/dist/transformers.min.js'

方案3：扩展 Webpack 配置直接处理语法 #

在 nuxt.config.js 中添加 Webpack 规则，用 babel-loader 处理 @xenova/transformers 的源码文件：

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 添加规则处理目标包的JS文件
      config.module.rules.push({
        test: /\.js$/,
        include: /node_modules\/@xenova\/transformers/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-private-methods',
              '@babel/plugin-transform-optional-chaining',
              '@babel/plugin-transform-nullish-coalescing-operator',
              '@babel/plugin-transform-modules-commonjs'
            ]
          }
        }
      })
    }
  }
}

需提前安装依赖：

npm install babel-loader @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-modules-commonjs --save-dev

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