I am having trouble integrating the "react-pdf-viewer" package into my Next.js project using TypeScript. I have downloaded the package via npm and followed the instructions in the documentation. However, when I try to compile my project, I encounter the following error:
Failed to compile
./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
Currently, no loaders are configured to process this file.
(Source code omitted for this binary file)
This error occurred during the build process and can only be dismissed by fixing the error.
Can anyone suggest a solution to resolve this error? Any insights on what may be causing the issue and potential fixes would be greatly appreciated.
Steps I Have Taken:
- I navigated to the project directory and opened the terminal.
- I ran the
npm install react-pdf-viewercommand to install the package. - I followed the steps provided in the documentation to add the package to my project.
- Upon compiling the project, I encountered the aforementioned error.
About My Project:
- I am using Next.js with TypeScript.
- No issues with other packages have been observed; this problem seems isolated to the "react-pdf-viewer" package.
- It is uncertain whether manual adjustments to the Webpack configuration are necessary.
ReaderPdf component
import React from 'react';
// Import Worker
// Import the main Viewer component
import {Viewer, Worker} from "@react-pdf-viewer/core";
// Import the styles
import "@react-pdf-viewer/core/lib/styles/index.css";
// default layout plugin
// @ts-ignore
import {defaultLayoutPlugin} from "@react-pdf-viewer/default-layout";
// Import styles of default layout plugin
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
const ReaderPdf = () => {
const defaultLayoutPluginInstance = defaultLayoutPlugin();
const pdfFile = "/public/upload/pdf/198727.pdf";
return (
<>
{pdfFile && (
<Worker workerUrl="https://unpkg.com/@react-pdf-viewer/pdfjs-dist/build/pdf.worker.min.js">
<Viewer
fileUrl={pdfFile}
plugins={[defaultLayoutPluginInstance]}
></Viewer>
</Worker>
)}
</>
)
};
export default ReaderPdf;
My Expectation
"I aim to effectively utilize the react-pdf-viewer package to showcase pages of a PDF file and later extract text from those pages. However, I currently lack a clear path on how to proceed with these tasks. Any sample code or step-by-step guidance from someone experienced in this regard would be highly beneficial."
Thank you in advance for any help or recommendations!