0
373
VisualizaçõesObteniendo un error al usar el módulo pdf-viewer-reactjs en Next.js
He usado pdf-viewer-reactjs en mi proyecto Next.js Pero obteniendo el siguiente 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; |¡Hasta ahora he intentado seguir ambos caminos pero nada funcionó para mí!
¿Cómo usar este npm en mi proyecto sin ningún error?
El código (Forma 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;El código (Forma 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 Respostas
Responde à pergunta0
Pude ejecutar el siguiente código con éxito, sin embargo , requiere pasos adicionales
- Instale babel runtime -
yarn add @babel/runtime- cortesía de esta publicación. - El icono de la interfaz de usuario del material da un error, por lo que, de manera similar, agregue las dependencias de la interfaz de usuario del material.
Suponiendo que esto es lo que quieres: 
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> ); }Importaciones dinámicas
Si desea realizar una importación dynamic como intentaba hacer anteriormente, es posible que deba vincular la exportación del módulo individual a - potencialmente pdf-viewer-reactjs/pdf-viewer-reactjs - Esto necesita más atención.
·
Juan Pablo Isaza
Relatório
Responde à pergunta