Getting error while using pdf-viewer-reactjs module in Next.js

Question

I have used pdf-viewer-reactjs into my Next.js project. But getting following error.

error - ./node_modules/pdfjs-dist/build/pdf.js 2094:26
Module parse failed: Unexpected token (2094:26)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   async destroy() {
|     this.destroyed = true;
>     await this._transport?.destroy();
|     this._transport = null;
|

So far I've tried following both ways but nothing worked for me!

How to use this npm into my project without any errors?

The code (Way 1):

import React from 'react';
import StudentPortalLayout from "../../../components/Layout/StudentLayout";

import dynamic from "next/dynamic";

const PDFViewer = dynamic(() => import("pdf-viewer-reactjs"), {
    ssr: false
});

function PDFView() {
    return (
        <StudentPortalLayout hideSidebar={true}>
            <PDFViewer
                document={{
                    url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
                }}
            />
        </StudentPortalLayout>
    )
}

export default PDFView;

The code (Way 2):

import React from 'react';
import StudentPortalLayout from "../../../components/Layout/StudentLayout";

import PDFViewer from 'pdf-viewer-reactjs'

function PDFView() {
    return (
        <StudentPortalLayout hideSidebar={true}>
            <PDFViewer
                document={{
                    url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
                }}
            />
        </StudentPortalLayout>
    )
}

export default PDFView;

score 1 · Accepted Answer · answered Jan 31 '22 at 14:17

I was able to run the following code successfully, however it requires additional steps

Install the babel runtime - yarn add @babel/runtime - courtesy this post.
Material UI icon gives an error, so similarly add the material UI dependencies

Assuming this is what you want:

Stackblitz - https://stackblitz.com/edit/nextjs-utkd32?file=pages%2Findex.js

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import PDFViewer from 'pdf-viewer-reactjs';

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
      </Head>

      <main className={styles.main}>
        <PDFViewer
          document={{
            url: 'https://arxiv.org/pdf/quant-ph/0410100.pdf',
          }}
        />
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
        </a>
      </footer>
    </div>
  );
}

Dynamic Imports

If you want to do a dynamic import as you were trying to do above, the export of the individual module maybe need to linked to - potentially pdf-viewer-reactjs/pdf-viewer-reactjs - This needs more to be looked into.

Getting error while using pdf-viewer-reactjs module in Next.js

1 Answers1

Dynamic Imports