在Next.js 13中使用Langchain文档加载器时如何修复‘fs module not found’错误？

问题根源很明确：langchain/document_loaders/fs/pdf下的PDFLoader依赖Node.js的fs模块，但Next.js 13的客户端组件默认运行在浏览器环境，没有fs模块，因此触发报错。以下是几种可行的解决方案：

方案1：用服务器组件处理PDF加载 #

服务器组件运行在Node.js环境，天然支持fs模块，直接在服务器组件中使用PDFLoader即可：

// app/PdfLoaderServer.tsx
import { PDFLoader } from "langchain/document_loaders/fs/pdf";

async function loadPdf() {
  // 此处填写服务器端可访问的PDF路径
  const loader = new PDFLoader("./public/sample.pdf");
  const docs = await loader.load();
  return docs;
}

export default async function PdfLoaderComponent() {
  const docs = await loadPdf();
  return <div>已加载PDF的{docs.length}页内容</div>;
}

方案2：在API路由中处理前端上传的PDF #

如果是用户上传PDF的场景，将解析逻辑放在API路由（Node.js环境）中，前端仅负责上传文件：

前端客户端组件代码 #

// app/PdfUploadClient.tsx
async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
  const file = e.target.files?.[0];
  if (!file) return;

  const formData = new FormData();
  formData.append("pdf", file);

  const res = await fetch("/api/parse-pdf", {
    method: "POST",
    body: formData,
  });

  const data = await res.json();
  console.log("解析后的文档内容：", data);
}

export default function PdfUploadComponent() {
  return <input type="file" accept=".pdf" onChange={handleFileUpload} />;
}

API路由代码 #

// app/api/parse-pdf/route.ts
import { PDFLoader } from "langchain/document_loaders/fs/pdf";
import { NextResponse } from "next/server";
import { writeFileSync, unlinkSync } from "fs";
import { join } from "path";

export async function POST(req: Request) {
  const formData = await req.formData();
  const pdfFile = formData.get("pdf") as File;

  // 将上传的文件转成Buffer并临时保存到服务器
  const buffer = Buffer.from(await pdfFile.arrayBuffer());
  const tempPath = join(process.cwd(), "temp_upload.pdf");
  writeFileSync(tempPath, buffer);

  // 用PDFLoader解析文件
  const loader = new PDFLoader(tempPath);
  const docs = await loader.load();

  // 删除临时文件
  unlinkSync(tempPath);

  return NextResponse.json(docs);
}

方案3：客户端直接解析PDF（无需fs） #

如果必须在客户端处理，可跳过Langchain的fs/pdf加载器，直接用pdf-parse库解析文件，再转成Langchain的Document格式：

// app/PdfClientParser.tsx
import pdf from "pdf-parse";

async function parsePdfInClient(file: File) {
  const buffer = await file.arrayBuffer();
  const parseResult = await pdf(buffer);
  // 转成Langchain要求的Document结构
  const docs = [{
    pageContent: parseResult.text,
    metadata: { source: file.name, pages: parseResult.numpages }
  }];
  return docs;
}

async function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
  const file = e.target.files?.[0];
  if (!file) return;
  const docs = await parsePdfInClient(file);
  console.log("客户端解析完成：", docs);
}

export default function PdfClientComponent() {
  return <input type="file" accept=".pdf" onChange={handleFileUpload} />;
}

关键注意事项 #

• Next.js 13的App Router中，默认组件是客户端组件，所有依赖Node.js原生模块（如fs）的操作必须放在服务器组件、API路由或Server Actions中。
• 若要在组件中混合前后端逻辑，可通过'use server'标记服务器端函数，或拆分纯服务器组件单独处理文件加载。

内容的提问来源于stack exchange，提问作者Dr. Ayilara