Next.js 14.2.10 构建错误：在客户端组件中使用 pdfjs-dist 时出现“无法解析‘canvas’”

Question

我正在开发 Next.js 应用程序（版本 14.2.10）并使用 pdfjs-dist 库（版本 3.11.174）实现简历上传功能。然而，在构建过程中，我遇到了以下错误：

`Build Error
Failed to compile

Next.js (14.2.10) out of date (learn more)
./node_modules/pdfjs-dist/build/pdf.js:6247:1
Module not found: Can't resolve 'canvas'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/components/AddCandidate/CVUpload.tsx
./src/components/AddCandidate/AddCandidateForm.tsx
./src/components/AddCandidate/AddCandidate.tsx
./src/app/candidates/new/page.tsx
`

尽管执行了多个故障排除步骤，错误仍然存在。以下是我迄今为止尝试过的详细信息：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        canvas: false,
      };
    }
    return config;
  },
};

export default nextConfig;

• 使用“use client”将 CVUpload.tsx 和所有父组件标记为客户端组件；。
• 更新 next.config.mjs 以忽略客户端的画布模块，如上所示。
• 为 pdfjs-dist/build/pdf 创建 TypeScript 声明文件。

declare module 'pdfjs-dist/build/pdf' {
  import * as pdfjsLib from 'pdfjs-dist';
  export = pdfjsLib;
}

• 执行依赖项的全新安装。
• 确保 pdfjs-dist 仅在客户端组件中导入。
• 尝试在 useEffect 中动态导入（未解决问题）。

附加信息：

Next.js 配置：

next.config.mjs：如上所示进行更新以包含画布的 Webpack 后备。 TypeScript 配置：

tsconfig.json：已更新以包含自定义类型声明。

项目结构：

CVUpload.tsx 组件位于 ./src/components/AddCandidate/CVUpload.tsx 并在 AddCandidateForm.tsx 中使用，该组件在 AddCandidate.tsx 中进一步使用，最终在 ./src/app/candidates/new/ 中渲染页.tsx.

其他依赖项：

使用 Material-UI (@mui/material)、react-dropzone、mammoth 和妥协。

为什么即使在客户端配置 Webpack 忽略它之后，我仍然遇到“无法解析‘canvas’”错误？

任何见解将不胜感激。

Answer 1

安装包 null-loader npm install null-loader 然后编辑你的 next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
        config.externals = [...config.externals, { canvas: "canvas" }];
        if (!options.isServer) {
            // Use null-loader for canvas in client-side builds to completely ignore it
            config.module.rules.push({
                test: /canvas/,
                use: 'null-loader',
            });

            // Set fallback for canvas to false
            config.resolve.fallback = {
                ...config.resolve.fallback,
                canvas: false,
            };
        }
        return config;
    },
    experimental: {
        esmExternals: "loose", // required for the canvas to work
      },
      
    
};

export default nextConfig;

我只是希望这能解决您的问题。