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

[cezarcarvalhaes]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in Mozilla Firefox

Description
When building my Gatsby app, I get a module not found error: Error: Can't resolve 'canvas' in '(...)/node_modules/pdfjs-dist/build'

This is likely the same issue as #799 , however, that issue was closed and the issue and solution were Next.js-specific. I'm encountering this issue in Gatsby (v3).

Steps to reproduce

Steps to reproduce the behavior:

1. Create a Gatsby App
2. Install react-pdf
3. Import react-pdf on a page and render a document.
4. run gatsby build

Expected behavior

What you expected to happen?
The app to build.

Additional information
I was able to get around this by locking my react-pdf version at 5.2 as suggested in this comment from the #799 issue, however, this should not be a long-term solution. I encountered this error in version 5.4.1.

Environment

• Browser (if applicable) [e.g. Chrome 57, Firefox 59]: N/A
• React-PDF version [e.g. 3.0.4]: 5.4.1
• React version [e.g. 16.3.0]: 17.0.2
• Webpack version (if applicable) [e.g. 4.16.2]: 4.44.2

[transitive-bullshit]

This doesn't seem specific to Gatsby as I'm also getting the same error with Next.js 11.1.2 no matter how I try to import react-pdf (normal, dynamic, and dynamic w/ ssr disabled).

[wojtekmaj]

It makes no sense to use React-PDF server-side. Canvas contents can't be server side rendered.

[cezarcarvalhaes]

It makes no sense to use React-PDF server-side. Canvas contents can't be server side rendered.

Not sure if you were responding to me or the comment above, but just in case it was meant for me, this is not in a server side environment- it's strictly front-end.

[wojtekmaj]

Gatsby and Next.js are both using a form of server side rendering, however they call it - it is done in Node.js.

[cezarcarvalhaes]

Hmmm...I wonder what it is about version 5.2 that works without issue.

[wojtekmaj]

Are you able to provide full error stack, or a repro repo?

[jonavdd]

Are you able to provide full error stack, or a repro repo?

The workaround to fix the version to v5.2.0 mentioned by @cezarcarvalhaes works for me to resolve the build part. But i encounter another issue. When using gatsby navigate to go to a page with the react-pdf on page its stuck in a loading state without any errors. When doing a hard refresh it works.

When using the latest version of react-pdf this navigation problem doesn't occur but the original error Can't resolve 'canvas' is back. So i'm kind of stuck.

[yordis]

webpack(config, { isServer }) {
      // https://github.com/wojtekmaj/react-pdf/issues/799
      // https://github.com/mozilla/pdf.js/issues/13373
      if (isServer) {
        config.resolve.alias.canvas = false;
      }

      return config;
    },

That is how I solved the issue, canvas usage in the SSR should be avoided since it wouldn't make much sense

[plbrault]

I had the same error while using react-pdf on Gatsby, and I fixed it using that solution to an issue on another package:
react-pdf-viewer/react-pdf-viewer#497 (comment)

[cezarcarvalhaes]

@wojtekmaj Sorry for the wait, here's a sample repo: https://github.com/cezarcarvalhaes/gatsby-react-pdf

It's failing in the SSR build, which makes sense. That must be why it works in development mode, but not in builds.

Also, a quick heads up, this same error throws in Gatsby 4: both in development and build.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[syed-ahmed]

Leaving this here if people are integrating react-pdf with something like docusaurus. I took @yordis's solution and added a docusaurus plugin for react-pdf: https://github.com/syed-ahmed/docusaurus-plugin-react-pdf :). I was facing the problem mentioned in this issue before making this plugin. Since docusaurus exposes configuration of webpack using plugins, it made sense to encapsulate react-pdf as a plugin. The current plugin doesn't expose all the configuration that react-pdf provides and I don't have any plans right now to extend this, but contributions are welcome. My rendered pdfs look great, so thanks react-pdf authors!

[coltenkrauter]

This answer has a bit moe context: #799 (comment)

[NobinPegasus]

Having the same issue while building app using gatsby. After I install react-pdf
Can't apply #799 because I'm using gatsby.

[wojtekmaj]

Please kindly try react-pdf@7.0.0-beta.3 or later.