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

Question

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:

I navigated to the project directory and opened the terminal.
I executed the npm install react-pdf-viewer command to download the package.
I added the package to my project following the steps mentioned in the documentation.
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/[email protected]/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!

Mathias Kalipe · Accepted Answer · 2024-02-19 13:47:28Z

1

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

edited Feb 19, 2024 at 13:47

answered Feb 19, 2024 at 13:44

Mathias Kalipe

464 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricardo Capozza Over a year ago

This solution worked for me for the same problem I encountered while using react-konva and Next.js.

Bogdan Le · Accepted Answer · 2024-10-11 05:58:49Z

1

With no dependencies:

What worked for me is to add in next.config.mjs the following webpack lines:

const nextConfig = {
...
  webpack: (config) => {
    config.resolve.alias.canvas = false;

    return config;
  },
};

export default nextConfig;

answered Oct 11, 2024 at 5:58

Bogdan Le

2,2962 gold badges21 silver badges22 bronze badges

1 Comment

Benzagon Oct 20 at 12:42

This worked for me using recharts with NextJS 14.

Collectives™ on Stack Overflow

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

ReaderPdf component

my expectation

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

ReaderPdf component

my expectation

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related