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

1. Create a Next JS application
2. Install react-pdf
3. Import react-pdf in some page

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

1. 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

[szczepanbarszczowski]

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.

[hfossli-agens]

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
    }
}