Gatsby SSR Error

[rudyportillo]

Dependencies

"@react-pdf-viewer/core": "^2.4.1",
"@react-pdf-viewer/default-layout": "^2.4.1",
"gatsby": "^3.1.2",

Component

In production the PDF location is remote.

import React from 'react';
import { Viewer, SpecialZoomLevel, Worker } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

// Import styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';
import './ReviewPdf.scss';

export const ReviewPdf = () => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin({
    sidebarTabs: (defaultTabs) => [
      defaultTabs[0], // Thumbnails tab
    ],
  });

  return (
    <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.6.347/build/pdf.worker.min.js">
      <section
        id="review-pdf"
        className="border border-white text-pink text-sm"
      >
        <Viewer
          fileUrl="/static/xxxx/helloworld.pdf"
          plugins={[defaultLayoutPluginInstance]}
        />
      </section>
    </Worker>
  );
};

Error

ERROR #98124  WEBPACK

Generating SSR bundle failed

Can't resolve 'canvas' in '/Users/xxxx/dev/xxxx/node_modules/pdfjs-dist/build'

If you're trying to use a package make sure that 'canvas' is installed. If you're trying to use a local file
make sure that the path is correct.

File: node_modules/pdfjs-dist/build/pdf.js:4370:21

[rudyportillo]

I fixed the issue after installing canvas npm i canvas and adding to gatsby-node.js

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /canvas/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
};

Credit goes to @jonniebigodes gatsbyjs/gatsby#17661 (comment)