Can't resolve 'canvas' in '(...)/node_modules/pdfjs-dist/build'

Description

When building my Next JS application I get this error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '(...)/node_modules/pdfjs-dist/build'

Steps to reproduce

Create a Next JS application
Install react-pdf
Import react-pdf in some page

import { Document, Page, pdfjs } from "react-pdf/dist/umd/entry.webpack"

Build (e.g. yarn build)

Expected behavior

Expected the application to build

Additional information

$ yarn build
yarn run v1.22.10
$ next build
(node:29765) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at (...)/node_modules/next/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
Loaded env from (...)/.env.local
info  - Using external babel configuration from (...)/.babelrc
info  - Creating an optimized production build  
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '(...)/node_modules/pdfjs-dist/build'


> Build error occurred
Error: > Build failed because of webpack errors
    at (...)/node_modules/next/dist/build/index.js:15:918
    at async (...)/node_modules/next/dist/build/tracer.js:1:1441
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

React-PDF version: 5.3.0
React version: 17.0.1
Webpack version (if applicable): 4.44.2

Issue Analytics

State:
Created 2 years ago
Comments:7

Top GitHub Comments

5reactions

szczepanbarszczowskicommented, Jul 28, 2021

I managed to fix this issue with locking version of react pdf in package.json to "react-pdf": "5.2.0", previously it was "react-pdf": "^5.2.0", with this character ^ and it was causing resolution of pdfjs-dist to version 2.6. After change it results in 2.5 version which is not causing this problem.

5reactions

hfossli-agenscommented, Jun 21, 2021

Solution

Add this to .next.config.js:

module.exports = {
    target: "serverless",
    future: { webpack5: true },
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.resolve.alias.canvas = false
        config.resolve.alias.encoding = false
        return config
    }
}