I am using react-pdf and react-pdf/renderer in nextjs after creating the file and adding the code it works perfectly but when I make the production build it continues to make the build and never stops. here is the code

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';


const PDFGenerator = () => {
    const styles = StyleSheet.create({
        page: {
            flexDirection: 'row',
            backgroundColor: '#E4E4E4'
        },
        section: {
            margin: 10,
            padding: 10,
            flexGrow: 1
        }
    });

    return (
        <Document>
            <Page size="A4" style={styles.page}>
                <View style={styles.section}>
                    <Text>Section #1</Text>
                </View>
                <View style={styles.section}>

                    <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
        
      );
}
 
export default PDFGenerator;

and here I am using it

                 <PDFDownloadLink
                    document={<PDFGenerator/>}
                    fileName="recipe.pdf"
                    className="button-background w-full text-center text-color py-2 px-4 
                     rounded mt-10">
                    {({blob, url, loading, error}) => (loading

                        ? 'Loading document...'
                        : 'Download PDF')}
                </PDFDownloadLink>

I am using react-pdf and react-pdf/renderer in nextjs after creating the file and adding the code it works perfectly but when I make the production build it continues to make the build and never stops. here is the code

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';


const PDFGenerator = () => {
    const styles = StyleSheet.create({
        page: {
            flexDirection: 'row',
            backgroundColor: '#E4E4E4'
        },
        section: {
            margin: 10,
            padding: 10,
            flexGrow: 1
        }
    });

    return (
        <Document>
            <Page size="A4" style={styles.page}>
                <View style={styles.section}>
                    <Text>Section #1</Text>
                </View>
                <View style={styles.section}>

                    <Text>Section #2</Text>
                </View>
            </Page>
        </Document>
        
      );
}
 
export default PDFGenerator;

and here I am using it

                 <PDFDownloadLink
                    document={<PDFGenerator/>}
                    fileName="recipe.pdf"
                    className="button-background w-full text-center text-color py-2 px-4 
                     rounded mt-10">
                    {({blob, url, loading, error}) => (loading

                        ? 'Loading document...'
                        : 'Download PDF')}
                </PDFDownloadLink>

• javascript
• reactjs
• next.js
• react-pdf
• react-pdfrenderer

4 Answers 4

TL;DR npm add -D encoding solved my case

Hi, I've had a similar issue even with updated version of next.

• Next.js 13.4.4

• React 18.2.0

• react-pdf/renderer 3.1.11

During dev i was getting 'just' a warning (everything was working fine):

- warn ./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in \node_modules\node-fetch\lib'
de-ponyfill.js
./node_modules/@react-pdf/font/lib/index.cjs.js
./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js
./app/ponents/--which were using @react-pdf

silly me ignored the warning, and proceed to run build, than only met with:

Failed to pile.

./node_modules/cross-fetch/dist/node-ponyfill.js
Module parse failed: Identifier 'Headers' has already been declared (20:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js/concepts#loaders
| const _fetch = fetch
| export { _fetch as fetch }
> export const Headers = Headers
| export const Request = Request
| export const Response = Response

Import trace for requested module:
./node_modules/cross-fetch/dist/node-ponyfill.js
./node_modules/@react-pdf/font/lib/index.cjs.js
./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js
./app/ponents/--which were using @react-pdf

> Build failed because of webpack errors

and the solution:

In your next.config.js file, update the swcMinify to false

const nextConfig = { /* all your config */ swcMinify: false, }

didn't work for me, or any webpack configuration, or cross-fetch update or "downgrade", or --legacy-peer-deps with @react=pdf/renderer

but i've stumbled on this issue: Module not found: Can't resolve 'encoding' in '/vercel/path0/node_modules/cross-fetch/node_modules/node-fetch/lib' where solution was to run:

npm add -D encoding

and it work for my case with @react-pdf/renderer, i'm a freshie so i hope this helps

Thi code is work for me with NextJs14 (App route)

import { pdfjs,Document, Page } from "react-pdf";
import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
import 'react-pdf/dist/esm/Page/TextLayer.css'

// pdfjs-dist : From Local _OR_ pdfjs-dist : From CDN pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg./[email protected]/build/pdf.worker.min.mjs`
/* pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  //"npm:pdfjs-dist/build/pdf.worker.min.mjs",
 //"pdfjs-dist/legacy/build/pdf.worker.min.mjs",
  import.meta.url
).toString();  */

//pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg./[email protected]/build/pdf.worker.min.mjs`
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare./ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`;

/* const options = {
  cMapUrl: '/cmaps/',
  standardFontDataUrl: '/standard_fonts/',
}  */

I face the same problem, here is what I've done.

First some context:

• Next.js 12.3.1
• React 17.0.1
• react-pdf/renderer 3.1.9

Tried to prevent the page that uses the ponents from being taken into account during next.js pile time in two ways:

• By setting a state that bees true in the ponentDidMount lifecycle and conditionally rendering the ponent that uses the react-pdf/renderer library.
• By performing dynamic import of the ponent that uses the react-pdf/renderer library.
• Even a bination of both

In either case, running yarn build in the terminal does not plete the process.

An important observation is that if I do not import the ponent that uses the library, the pilation does not take more than 30 seconds.

I've manage to find a "solution" or at least a possible workaround.

Like I said the project i'm working on is using next.js v 12.3.1. Apparently there is a bug in a dependency for that nexjs version.

The proper solution I think it would be to update your next.js version to the latest.

If that is not possible (like in my case) I found this issue response that gave me the idea and it worked.

In your next.config.js file, update the swcMinify to false

const nextConfig = {
  /* all your config */
  swcMinify: false,
}

Then you can go ahead and in your terminal run yarn build and you'll get your build done. This was also discussed here.

Maybe react-pdf is not supported by SSR?

Try using Dynamic imports and see if it solves your issue:

import React, { useState } from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';

// Lazily import when rendered on UI
const PDFGenerator = React.lazy(() => import('./PDFGenerator'));

const DownloadPDF = () => {
  const [showPDF, setShowPDF] = useState(false);

  return (
    <>
      <button onClick={() => setShowPDF(true)}>Download PDF</button>
      {showPDF && (
        <React.Suspense fallback="Loading...">
          <PDFDownloadLink
            document={<PDFGenerator />}
            fileName="recipe.pdf"
            className="button-background w-full text-center text-color py-2 px-4 
            rounded mt-10"
          >
            {({ blob, url, loading, error }) =>
              loading ? 'Loading document...' : 'Download PDF'
            }
          </PDFDownloadLink>
        </React.Suspense>
      )}
    </>
  );
};

export default DownloadPDF;