React中使用@xenova/transformers创建pipeline实例报错求助

错误本质 #

你遇到的SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"错误，核心原因是@xenova/transformers库在加载模型资源（如权重文件、worker脚本）时，请求返回了HTML页面（通常是404错误页），而非预期的JSON或模型二进制资源，导致解析失败。

排查与修复步骤 #

1. 修正错误抛出逻辑 #

你当前的throw new Error(error)会丢失原错误的详细信息，先修改catch块，保留完整错误日志：

catch (error) {
    console.error('Pipeline初始化失败:', error);
    console.error('错误详情:', error.message, error.stack);
    throw error; // 直接抛出原错误，避免信息丢失
}

打开浏览器开发者工具的Network面板，找到返回HTML的请求（状态码大概率是404），确认是哪个资源加载失败。

2. 配置transformers资源路径 #

React的打包工具（Webpack/Vite）默认可能无法正确处理transformers的worker和模型资源，需手动配置资源路径：

import { pipeline, env } from '@xenova/transformers';

// 配置使用官方CDN加载模型资源（优先推荐）
env.remoteModels = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/models/';
// 允许加载本地模型（如果有本地部署需求）
// env.allowLocalModels = true;

class MyExtractorPipeline {
    static task = "feature-extraction";
    static model = "Xenova/all-MiniLM-L6-v2";
    static instance = null;

    static async getInstance(model = this.model, progress_callback = null) {
        if (this.instance === null) {
            try {
                this.instance = await pipeline(this.task, model, { 
                    progress_callback,
                    backend: 'tfjs', // 指定后端，避免自动检测问题
                });
            } catch (error) {
                console.error('Pipeline初始化失败:', error);
                throw error;
            }
        }
        return this.instance;
    }
}

3. 适配打包工具配置（按需） #

如果使用Vite，需在vite.config.js中添加优化配置：

export default {
    optimizeDeps: {
        include: ['@xenova/transformers'],
    },
}

如果使用Webpack，需确保worker-loader正确处理transformers的worker脚本，或直接使用CDN加载worker。

4. 验证模型名称正确性 #

确认使用的模型名称是Xenova官方托管的，比如Xenova/all-MiniLM-L6-v2是正确的官方模型ID，避免拼写错误。

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