Next.js集成react-pdf遇webpack loader错误，求排查解决

1. 修正组件核心错误 #

你的Menu组件存在两个关键问题：

• Document的file属性传入的是HTML页面地址，而非PDF文件，会导致加载逻辑异常
• Document组件必须搭配Page组件才能渲染PDF内容

修正后的组件代码：

"use client";
import { Document, Page, pdfjs } from "react-pdf";
import { useState } from "react";

// 客户端环境配置PDF Worker
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url
).toString();

export default function Menu() {
  const [numPages, setNumPages] = useState<number>(0);
  const [pageNumber, setPageNumber] = useState<number>(1);

  const handleDocumentLoad = ({ numPages }: { numPages: number }) => {
    setNumPages(numPages);
  };

  // 替换为真实PDF文件地址
  const pdfUrl = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";

  return pdfUrl ? (
    <div>
      <Document
        file={pdfUrl}
        onLoadSuccess={handleDocumentLoad}
        options={{
          cMapUrl: "/cmaps/",
          cMapPacked: true,
        }}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>第 {pageNumber} 页 / 共 {numPages} 页</p>
    </div>
  ) : null;
}

2. 完善webpack配置（next.config.js） #

原配置缺少处理PDF文件和PDF Worker的loader规则，补充后完整配置：

/** @type {import('next').NextConfig} */
const path = require("node:path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const nextConfig = {
  webpack: (config, options) => {
    // 添加PDF文件处理规则
    config.module.rules.push({
      test: /\.pdf$/,
      use: [{
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "static/pdf/"
        }
      }]
    });

    // 添加PDF Worker文件处理规则
    config.module.rules.push({
      test: /pdf\.worker\.min\.js$/,
      use: [{
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "static/workers/"
        }
      }]
    });

    // 保留原有的cmaps复制逻辑
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(
              path.dirname(require.resolve("pdfjs-dist/package.json")),
              "cmaps"
            ),
            to: "cmaps/"
          }
        ]
      })
    );

    return config;
  }
};

module.exports = nextConfig;

执行安装依赖命令：

npm install file-loader --save-dev

3. 调整Worker配置位置 #

将PDF Worker的配置从layout.tsx移到客户端组件（如上述Menu组件）中，避免服务端渲染时出现import.meta.url的兼容性问题。

4. 确认动态导入逻辑 #

你的动态导入方式正确，确保menuUrl变量已正确定义：

import dynamic from "next/dynamic";

const Menu = dynamic(() => import("./menu"), { ssr: false });

关键错误总结 #

• Document组件的file属性传入错误资源类型
• webpack未配置PDF和Worker文件的处理规则
• Worker配置位置不符合Next.js服务端渲染的环境要求

内容的提问来源于stack exchange，提问作者Q.uestion