Could not load pdf-previewer-web-part in require. Error: Module parse failed: Unexpected token

Question

I tried more than one time to run the pdf previewer plugin in my SPFX solution. but they are throwing errors like this which I mention below. and also I mentioned a pdf previewer plugin.

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

can you someone suggest to me what an error in my code?

Pdf Previewer.tsx file (create using class component)

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>
    )
  }
}

Terminal Error

Console Error Image

I wish to utilize pdf-previewer within my SPFX setup.

Answer 1

The error message:

Module parse failed: Unexpected token

typically indicates an issue with how your code is being transpiled or bundled.

It suggests that the JavaScript parser encountered a token it did not expect.

Please ensure that the versions of your dependencies (such as @microsoft/sp-webpart-base or any other relevant packages) in your package.json file are compatible with each other.