Failed to compile due to Webpack errors - Module parse failed: Unexpected character '�' using Docusaurus

[tobiasbueschel]

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 PDF.js demo

Description

Context: using react-pdf in the latest Docusaurus version 3.2.1

• running npm run build works for the client but not for the server, the following error shows up:

[ERROR] Error: Unable to build website for locale en.
    at tryToBuildLocale (/test-repo/node_modules/@docusaurus/core/lib/commands/build.js:53:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /test-repo/node_modules/@docusaurus/core/lib/commands/build.js:64:9
    at async mapAsyncSequential (/test-repo/node_modules/@docusaurus/utils/lib/jsUtils.js:20:24)
    at async Command.build (/test-repo/node_modules/@docusaurus/core/lib/commands/build.js:62:5) {
  [cause]: Error: Failed to compile due to Webpack errors.
  Module parse failed: Unexpected character '�' (1:0)
  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)
      at /test-repo/node_modules/@docusaurus/core/lib/webpack/utils.js:230:24
      at /test-repo/node_modules/webpack/lib/MultiCompiler.js:596:14
      at processQueueWorker (/test-repo/node_modules/webpack/lib/MultiCompiler.js:533:6)
      at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

However, running npm start works without any problems and I can see the PDF rendered correctly in the Docusaurus website.

Steps to reproduce

1. Create a new docusaurus skeleton setup: npx create-docusaurus@latest my-website classic
2. npm install react-pdf
3. Add a new PdfViewer component to src/components/PdfViewer.jsx

import React, { useState } from 'react';
import { pdfjs, Document, Page } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.js', import.meta.url).toString();

export default function PdfViewer({ fileName }) {
  const [numPages, setNumPages] = useState(null);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  function openPdf() {
    window.open(fileName, '_blank', 'fullscreen=yes');
  }

  return (
    <>
      <button onClick={openPdf} className="button button--primary mb-3">
        Open PDF here
      </button>
      <Document file={fileName} onLoadSuccess={onDocumentLoadSuccess}>
        {Array.from(new Array(numPages), (el, index) => (
          <Page
            key={`page_${index + 1}`}
            pageNumber={index + 1}
            renderAnnotationLayer={false}
            renderTextLayer={false}
            onItemClick={openPdf}
            className="w-full [&>canvas]:!w-full [&>canvas]:!h-full"
          />
        ))}
      </Document>
    </>
  );
}

(I've also tried with <BrowserOnly /> inside the component, but that led to the same issue)

4. Add the following to your docusaurus.config.js:

// ...
plugins: [
    async function configureWebpack(context, options) {
      return {
        name: 'docusaurus-webpack-config',
        configureWebpack(config, isServer, utils) {
          if (isServer) {
            return {
              resolve: {
                alias: {
                  canvas: false,
                  encoding: false,
                },
              },
            };
          } else {
            return;
          }
        },
      };
    },
]
// ...

(reference from: https://github.com/syed-ahmed/docusaurus-plugin-react-pdf/blob/main/src/index.ts#L31-L42)

5. In any MDX doc, import the component and render a PDF.

<PdfViewer fileName={require('./docs/example.pdf').default} />

Expected behavior

The build succeeds.

Actual behavior

The build fails with the above mentioned error message.

Additional information

Potentially related issues & comments:

• react-pdf is not working when build with nextjs #136
• Can't resolve 'canvas' in '(...)/node_modules/pdfjs-dist/build' #874 (comment)
• [v6] Module parse failed: Unexpected character '#' when using Create-React-App #1043
• build error: cant's resolve 'canvas' in '...\.pnpm\...\build' when use pnpm #1045
• ./node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/build/Release/canvas.node Module parse failed: Unexpected character '�' (1:2) #1508

Environment

• Browser (if applicable): N/A
• React-PDF version: 7.7.1
• React version: 18.2.0
• Webpack version: 5.91.0
• Node version: 18.14.2
• Docusaurus version: 3.2.1