Next.js 14.2.10 使用pdfjs-dist在客户端组件时构建报错：Can't resolve 'canvas'

我来帮你搞定这个烦人的构建报错！你在Next.js 14.2.10里用pdfjs-dist做CV上传功能时遇到的Can't resolve 'canvas'问题，我之前帮好几个开发者解决过，给你梳理几个实用的方案：

方案一：补全webpack配置的关键细节 #

你之前的webpack配置思路是对的，但大概率是漏写了return语句，导致配置根本没生效！另外pdfjs-dist还可能会依赖其他Node.js内置模块，一并禁用更稳妥。把你的next.config.js改成这样：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        canvas: false,
        fs: false,
        path: false,
      };
    }
    return config; // 这里一定要return配置对象！
  },
};

module.exports = nextConfig;

很多人踩过这个坑，以为写了fallback就完事，结果忘了return config，相当于白配置了。

方案二：明确导入pdfjs的客户端专用版本 + 标记客户端组件 #

首先，确保你的CVUpload.tsx是客户端组件，在文件最顶部加上：

'use client';

然后替换原来的pdfjs导入语句，明确用客户端专用的构建版本：

// 替换你原来的import
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/build/pdf.worker.entry';

直接导入pdfjs-dist可能会默认拉取包含服务端逻辑的版本，指定客户端入口就能避开服务端依赖的canvas模块。

方案三：兜底方案 - 安装canvas开发依赖 #

如果前两个方案都没搞定，那可以试试安装canvas的开发依赖，让构建工具能找到这个包（但客户端实际不会用到它）：

npm install canvas --save-dev
# 或者用yarn的话
yarn add canvas -D

这个是兜底的，优先用前两个方案，因为安装canvas可能会增加打包体积。

额外排查小技巧 #

• 检查所有用到pdfjs的组件，确保都加了'use client'，服务端组件里用pdfjs肯定会触发这个错误
• 清理缓存后重新构建，有时候旧缓存会干扰：

rm -rf node_modules .next && npm install && npm run build

备注：内容来源于stack exchange，提问作者Stevenjparrett