使用@react-pdf-viewer/core时pdf.js报'#'字符语法错误求助

我正尝试使用react-pdf-viewer实现PDF查看器，但持续抛出如下错误：

/node_modules/pdfjs-dist/build/pdf.js: Unexpected character '#'
(1413:9)

1411 | 1412 | class PDFDocumentLoadingTask {

1413 | static #docId = 0;
| ^

我编写的代码如下：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Viewer } from "@react-pdf-viewer/core";

import "@react-pdf-viewer/core/lib/styles/index.css";

const ModalExample = ({ fileUrl }) => {
  const [shown, setShown] = useState(false);

  const modalBody = () => (
    <div
      style={{
        backgroundColor: "#fff",
        flexDirection: "column",
        overflow: "hidden",

        /* Fixed position */
        left: 0,
        position: "fixed",
        top: 0,

        /* Take full size */
        height: "100%",
        width: "100%",

        /* Displayed on top of other elements */
        zIndex: 9999,
      }}
    >
      <div
        style={{
          alignItems: "center",
          backgroundColor: "#000",
          color: "#fff",
          display: "flex",
          padding: ".5rem",
        }}
      >
        <div style={{ marginRight: "auto" }}>sample-file-name.pdf</div>
        <button
          style={{
            backgroundColor: "#357edd",
            border: "none",
            borderRadius: "4px",
            color: "#ffffff",
            cursor: "pointer",
            padding: "8px",
          }}
          onClick={() => setShown(false)}
        >
          Close
        </button>
      </div>
      <div
        style={{
          flexGrow: 1,
          overflow: "auto",
        }}
      >
        <Viewer
          fileUrl={
            "https://lodeep-storage-3.s3.amazonaws.com/ressources/60e5892d1e8b3c2c24c5463c1663835449323.pdf"
          }
        />
      </div>
    </div>
  );

  return (
    <>
      <button
        style={{
          backgroundColor: "#00449e",
          border: "none",
          borderRadius: ".25rem",
          color: "#fff",
          cursor: "pointer",
          padding: ".5rem",
        }}
        onClick={() => setShown(true)}
      >
        Open modal
      </button>
      {shown && ReactDOM.createPortal(modalBody(), document.body)}
    </>
  );
};

export default ModalExample;

相关依赖版本如下：

• "@react-pdf-viewer/core": "3.7.0"
• "react": "16.8.6"

问题原因 #

错误中的#docId是ES私有类字段的语法，你的项目构建工具（如Webpack、Babel）未配置支持该ES特性，或版本过低无法解析。react-pdf-viewer 3.7.0依赖的pdfjs-dist版本使用了较新的ES语法，而当前编译环境未做兼容处理，导致编译失败。

解决方法 #

方法一：升级构建工具及插件 #

确保Babel（若使用）配置包含支持私有类字段的插件，如@babel/plugin-proposal-private-property-in-object和@babel/plugin-proposal-private-methods，并将Babel升级至7.x以上版本。同时检查Webpack版本，确保其能处理这类新语法。

方法二：降级react-pdf-viewer到兼容版本 #

若不想升级构建工具，可降级react-pdf-viewer到依赖低版本pdfjs-dist的版本（如2.x系列），该版本的pdfjs-dist未使用私有类字段语法，兼容旧编译环境。执行命令：

npm install @react-pdf-viewer/core@2.11.1

注意降级后需同步调整API使用（若有变动），可参考对应版本的官方文档。

方法三：指定pdfjs-dist的预编译入口 #

在Webpack配置中添加别名，使用pdfjs-dist的预编译版本（已转译新ES语法）：

resolve: {
  alias: {
    'pdfjs-dist/build/pdf': 'pdfjs-dist/build/pdf.legacy.min.js'
  }
}

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