Next.js集成react-pdf编译失败问题求助

安全阿岳

2026-6-17

在启用Turbopack的Next.js项目中解决react-pdf编译失败问题

错误原因

报错核心是Turbopack不支持webpack专属的/*webpackIgnore: true*/注释，导致pdfjs-dist中的动态import语句被强制解析，触发模块找不到的错误。

解决方案步骤

1. 强制使用CDN加载PDF Worker

在客户端组件/带'use client'的Layout中配置Worker地址，直接使用CDN资源避免本地解析问题：

'use client';
import { pdfjs } from 'react-pdf';

// 版本建议和你安装的pdfjs-dist保持一致
pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.mjs';

2. 更新next.config.js配置

添加Turbopack别名和转译配置，避免Turbopack错误解析Worker路径：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        // 让Turbopack忽略Worker的本地路径解析
        'pdfjs-dist/build/pdf.worker.min.js': './empty-module.ts',
        canvas: './empty-module.ts',
      },
    },
  },
  // 转译react-pdf和pdfjs-dist，确保语法兼容Turbopack
  transpilePackages: ['react-pdf', 'pdfjs-dist'],
};

module.exports = nextConfig;

3. 确保PDF预览组件为客户端组件

给Pdfpreview组件添加'use client'指令，因为react-pdf依赖浏览器环境API：

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

function Pdfpreview() {
  const [numPages, setNumPages] = useState<number>();
  const [pageNumber, setPageNumber] = useState<number>(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document file="somefile.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        <Page pageNumber={pageNumber} />
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

export default Pdfpreview;