无法在 require 中加载 pdf-previewer-web-part。错误：模块解析失败：意外的标记

Question

我不止一次尝试在 SPFX 解决方案中运行 pdf 预览器插件。但他们抛出了我下面提到的这样的错误。我还提到了一个 pdf 预览器插件。

• 反应pdf
• @react-pdf-viewer/core

有人可以告诉我我的代码中有什么错误吗？

Pdf Previewer.tsx 文件（使用类组件创建）

import * as React from 'react';
import { IPdfPreviewerProps, IPdfPreviewerState } from './IPdfPreviewerProps';
import { PrimaryButton } from 'office-ui-fabric-react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

const options = {
  cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
};

export default class PdfPreviewer extends React.Component<IPdfPreviewerProps, IPdfPreviewerState> {

  constructor(props: IPdfPreviewerProps) {
    super(props);

    this.state = {
      viewPdf: false,
      totalPageNumber: 0,
      pageNumber: 0
    }
  }

  private onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    this.setState({
      totalPageNumber: numPages
    });
  }

  public render(): React.ReactElement<IPdfPreviewerProps> {

    return (
      <section>
        <PrimaryButton onClick={() => this.setState({ viewPdf: true })} text='Click Me' />
        <div>
          <Document file="https://pdfobject.com/pdf/sample.pdf" options={options}  onLoadSuccess={this.onDocumentLoadSuccess}>
            <Page pageNumber={this.state.pageNumber} />
          </Document>
          <p>
            Page {this.state.pageNumber} of {this.state.totalPageNumber}
          </p>
        </div>
      </section>
    )
  }
}

终端错误

控制台错误图像

我希望在 SPFX 设置中使用 pdf 预览器。

Answer 1

错误消息“模块解析失败：意外的令牌”通常表示代码的转译或捆绑方式存在问题。它表明 JavaScript 解析器遇到了它不期望的标记。请确保 package.json 文件中的依赖项版本（例如 @microsoft/sp-webpart-base 或任何其他相关包）彼此兼容。