Addressing an issue like this can be quite challenging, especially for beginners. This problem arises from a missing Webpack loader configuration. In simpler terms, react-pdf tries to load
canvas.node, but your application can't locate the correct loader to handle it.In Next.js, you can solve this problem by adding a custom Webpack loader using webpack rules.
Identifying the Root Issue
The underlying problem is that react-pdf attempts to load
canvas.node, and you haven't provided a mechanism to unpack it.How to Fix It?
To load
canvas.node in your Next.js application, you need a node loader. If you happened to miss this information on the React-pdf npm page, don't worry – it's there.Installing the Node Loader for canvas.node
You can install the node-loader like this:
npm install node-loader
As mentioned earlier, a custom Webpack loader is required to load
canvas.node in your Next.js application.Adding the Webpack Custom Loader
To add the Webpack loader, insert the following script into your
next.config.js file:module.exports = { webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => { config.module.rules.push({ test: /\\.node$/, use: 'node-loader', }) return config }, };
Installing the Node Loader
Run the following command to install the node-loader:
npm install node-loader
This should resolve the issue with your react-pdf application, and it should now display your PDF files.
Displaying PDFs with react-pdf
If the PDF file still doesn't appear after applying the fix above, there might be another problem. In such cases, you can check your browser's console for any error messages.
'use client'; import { useState } from 'react'; import { Document, Page } from 'react-pdf'; import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`; export default function Viewer() { const [numPages, setNumPages] = useState<number>(); const [pageNumber, setPageNumber] = useState<number>(2); function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { setNumPages(numPages); } return ( <div> <Document file="/sample.pdf" onLoadSuccess={onDocumentLoadSuccess} > <Page pageNumber={pageNumber}/> </Document> <p> Page {pageNumber} of {numPages} </p> </div> ); }
Make sure to place the
sample.pdf file in the public directory of your Next.js project.Conclusion
Resolving this issue involves two steps: installing the loader and updating the Webpack configuration.
Where to Go from Here
Similar issues may arise in the future when dealing with different types of loaders for your application. Learning about Webpack loaders and their role in React applications can help you overcome such problems.