CODEWITHSUNDEEP
reactjscanvasgatsbyreact-pdfpdf-reader
NobinPegasus
NobinPegasus

Reputation: 787

ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '/home/pegasus/Documents/Final_Website/blog/node_modules/pdfjs-dist/build'

When I installed react-pdf I get the following error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '/home/pegasus/Documents/Final_Website/blog/node_modules/pdfjs-dist/build'

I'm trying to render a pdf on a gatsby website. But for that I need react-pdf and it's throwing this error.

Upvotes: 8

Views: 5074

Answers (2)

Stefan Norberg
Stefan Norberg

Reputation: 1225

The canvas package doesn't come with arm64 binaries.

On Apple Silicon you need to:

xcode-select --install
brew install pkg-config cairo pango libpng jpeg giflib librsvg
CPLUS_INCLUDE_PATH=/opt/homebrew/include yarn add canvas

Upvotes: 1

AntoMNE
AntoMNE

Reputation: 89

To solve this specific error, try installing canvas module first:

npm install canvas

If you are using Next.js app router, another error might appear after installing canvas:

./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. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

To solve this error, you need to install 'raw-loader' module:

npm install raw-loader --save-dev

And add following code to your next.config.js:

module.exports = {
 webpack: (config) => {
   config.module.rules.push({
     test: /\.node/,
     use: 'raw-loader',
   });

   return config;
 },
}

Read documentation for more info: https://www.npmjs.com/package/react-pdf

Upvotes: 7

Related Questions