"canvas.node" Error During Installation of react-pdf-viewer Package with Next.js and TypeScript

I'm trying to integrate the "react-pdf-viewer" package into a Next.js project using TypeScript, but I'm encountering an issue during installation. I downloaded the package via npm and followed the steps in the documentation. However, when I compile my project, I'm getting 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.

How can I resolve this error? Do you have any suggestions regarding the source of the issue and potential solutions?

Steps Taken:

1. I navigated to the project directory and opened the terminal.
2. I executed the npm install react-pdf-viewer command to download the package.
3. I added the package to my project following the steps mentioned in the documentation.
4. Upon compiling the project, I encountered the aforementioned error.

About My Project:

• I'm using Next.js and TypeScript.
• I'm not facing any issues with other packages; this problem only arises with the "react-pdf-viewer" package.
• I'm unsure whether I need to manually adjust my Webpack configuration.

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/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
                    <Viewer
                        fileUrl={pdfFile}
                        plugins={[defaultLayoutPluginInstance]}
                    ></Viewer>
                </Worker>
            )}
        </>
    )

};

export default ReaderPdf;

my expectation

"My goal is to successfully utilize the react-pdf-viewer package to display the pages of a PDF file and then extract text from those pages. However, I currently lack a clear idea of how to proceed with these steps. If anyone with experience in this area can provide sample code or step-by-step instructions, it would be incredibly valuable."

Thank you in advance for any assistance or suggestions!

Add this to your next.config.js

const nextConfig = {
webpack: (
    config, options
) => {
    // Important: return the modified config
    config.module.rules.push({
        test: /\.node/,
        use: 'raw-loader',
    });
    return config;
}}

Install raw-loader by doing npm install -D raw-loader

And also next "use client" instruction at the top of your component file.

Hope this solve your issue