Failed to compile due to Webpack errors - Module parse failed: Unexpected character '�' using Docusaurus
tobiasbueschel opened this issue · comments
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
- Create a new docusaurus skeleton setup:
npx create-docusaurus@latest my-website classic
npm install react-pdf
- 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)
- 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)
- 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:
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
This definitely look like a flavor of #1508 and #1620.
You did everything just the way I'd do. I'm puzzled. If importing PdfViewer asynchronously in <BrowserOnly>
doesn't help, maybe it'd be better to ask on Docusaurus repo why that could be the case? I don't see any reason for BrowserOnly to be executed on the server side!