Next.js 14集成Tesseract.js遇模块缺失及fetch报错求助

问题分析 #

你遇到的两个错误根源分别是：

1. MODULE_NOT_FOUND：Next.js的构建机制会重写文件路径，Tesseract.js默认的worker脚本路径在打包后失效，无法从.next目录找到对应文件。
2. fetch is not a function：若代码运行在Node.js环境（如Server Components、API路由），Node.js（v18以下）无原生fetch，且worker线程未全局挂载node-fetch，导致识别图片时报错。

解决方案 #

方案1：在客户端组件中运行OCR（推荐） #

浏览器环境原生支持fetch，且Tesseract.js能自动处理worker脚本加载，无需手动配置路径。

1. 标记组件为客户端组件（添加'use client'指令）
2. 使用默认的createWorker配置，无需指定workerPath

'use client';
import { createWorker } from 'tesseract.js';

export const imgToText = async () => {
  const worker = await createWorker('eng');
  try {
    // 图片需放在public目录下，用相对路径访问
    const img = '/fake.png';
    const result = await worker.recognize(img);
    console.log(result.data.text);
    return result.data.text;
  } catch (error) {
    console.error('图片文本提取失败', error);
    throw error;
  } finally {
    await worker.terminate();
  }
};

方案2：在服务器端运行OCR（API路由/Server Action） #

若必须在Node环境运行，需全局挂载fetch并指定正确的worker路径：

import { createWorker } from 'tesseract.js';
import fetch from 'node-fetch';
import fs from 'fs/promises';

// 全局挂载fetch，供worker线程使用
global.fetch = fetch;

export async function POST() {
  const worker = await createWorker('eng', 1, {
    // 使用require.resolve自动获取node_modules中的worker脚本路径
    workerPath: require.resolve('tesseract.js/src/worker-script/node/index.js'),
  });

  try {
    // 服务器端需读取图片Buffer（示例读取public目录下的文件）
    const imgBuffer = await fs.readFile(`${process.cwd()}/public/fake.png`);
    const result = await worker.recognize(imgBuffer);
    return Response.json({ text: result.data.text });
  } catch (error) {
    console.error('OCR处理失败', error);
    return Response.json({ error: error.message }, { status: 500 });
  } finally {
    await worker.terminate();
  }
}

额外注意事项 #

• 图片路径：浏览器端使用public目录的相对路径；服务器端需用绝对路径读取文件（或从请求体接收图片Buffer）。
• 语言包预下载：首次运行Tesseract.js会自动下载英文语言包，生产环境可将语言包放到public目录，通过langPath配置指定路径，避免动态下载。
• App Router限制：Server Components无法调用浏览器API，OCR逻辑需放在客户端组件或API路由/Server Action中。

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