react-pdf in nextjs is not letting to make build

Question

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>

score 1 · Answer 1 · answered May 22 '23 at 17:20

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 components from being taken into account during next.js compile time in two ways:

By setting a state that becomes true in the componentDidMount lifecycle and conditionally rendering the component that uses the react-pdf/renderer library.
By performing dynamic import of the component that uses the react-pdf/renderer library.
Even a combination of both

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

An important observation is that if I do not import the component that uses the library, the compilation 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.

score 1 · Answer 2 · answered Jun 03 '23 at 01:37

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/components/--which were using @react-pdf

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

Failed to compile.

./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.org/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/components/--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

I will try this next time because I removed this package – Noman Jun 05 '23 at 15:15 — Noman, Jun 05 '23 at 15:15

score 0 · Answer 3 · answered Mar 15 '23 at 05:00

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;

react-pdf in nextjs is not letting to make build

3 Answers3