0
372
VistasGetting error while using pdf-viewer-reactjs module in Next.js
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;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta