在 Next.js 中使用 pdf-viewer-reactjs 模块时出错

Question

我已经在我的 Next.js 项目中使用了 pdf-viewer-reactjs。但是出现以下错误。

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;
|

到目前为止，我已经尝试了两种方法，但对我没有任何效果！

如何在我的项目中使用这个 npm 而没有任何错误？

代码（方式一）：

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;

代码（方式二）：

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;

Answer 1

我能够成功地运行下面的代码，但是它需要额外的步骤

安装 babel 运行时间 - yarn add @babel/runtime - 礼貌 post.
MaterialUI图标报错，所以同样添加materialUI依赖

假设这就是您想要的：

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 导入，可能需要将单个模块的导出链接到 - 可能 pdf-viewer-reactjs/pdf-viewer-reactjs - 这需要进一步研究进入。

在 Next.js 中使用 pdf-viewer-reactjs 模块时出错

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

javascript

npm

reactjs

next.js

动态导入