Next.js运行报错：canvas.node文件缺少合适Loader处理

问题原因 #

canvas.node是Node.js环境专属的二进制模块，而你的PDF文本提取逻辑是在浏览器客户端执行（处理用户上传的本地文件），但Next.js的webpack打包时会尝试解析所有依赖，包括这个仅适用于Node.js的二进制文件，从而触发缺少对应loader的错误。

解决方案 #

方案1：配置Next.js忽略canvas模块打包 #

在项目根目录的next.config.js中修改webpack配置，跳过对canvas模块的解析——客户端环境不需要这个模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 标记canvas为commonjs外部依赖，避免打包二进制文件
    config.externals.push({
      canvas: "commonjs canvas",
    });
    return config;
  },
};

module.exports = nextConfig;

方案2：使用pdfjs-dist浏览器版本+动态导入 #

pdfjs-dist提供了浏览器环境的专属构建版本，结合Next.js动态导入确保代码仅在客户端执行：

1. 修改PDF处理函数文件，改用动态导入：

export async function getContent(src: string) {
  // 动态加载浏览器版pdfjs
  const pdfjs = await import("pdfjs-dist/build/pdf");
  // 加载浏览器专用工作器
  const pdfjsWorker = await import("pdfjs-dist/build/pdf.worker.entry");
  pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker.default;

  const doc = await pdfjs.getDocument(src).promise;
  const numPages = doc.numPages;
  const allTextContent = [];

  for (let pageNum = 1; pageNum <= numPages; pageNum++) {
    const page = await doc.getPage(pageNum);
    const pageTextContent = await page.getTextContent();
    allTextContent.push(pageTextContent);
  }

  return allTextContent;
}

export async function getItems(src: string) {
  const content = await getContent(src);
  const allItems = content.flatMap((pageContent) =>
    pageContent.items.map((textItem) => textItem.str || "")
  );
  return allItems;
}

2. 确保调用函数的组件是客户端组件（Next.js 13+需在组件顶部添加指令）：

'use client';

// 组件其余代码，包含onSubmit逻辑
const YourUploadComponent = () => {
  // ... 原有代码
  const onSubmit = async () => {
    // ... 原有逻辑
  };
  // ...
};

方案3：用null-loader忽略二进制文件 #

若上述方案无效，可通过null-loader让webpack跳过该二进制文件的解析：

1. 安装依赖：

npm install null-loader --save-dev
# 或
yarn add null-loader --dev

2. 修改next.config.js：

const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.node$/,
      use: 'null-loader',
    });
    return config;
  },
};

module.exports = nextConfig;

验证 #

修改配置后重启Next.js开发服务器，上传PDF文件测试文本提取功能，确认错误不再出现。

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