React-pdf 7 causes " exceeds the maximum size limit of 50mb" build error on Vercel

[w3bdesign]

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

After trying to upgrade to React-pdf version 7 I am getting build errors on Vercel.

Error: The Serverless Function "_next/data/RGgqgLBLLHa65oFs5xGa9/nb-NO/cv.json" is 59.02mb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size NOW_SANDBOX_WORKER_MAX_LAMBDA_SIZE: The Serverless Function "_next/data/RGgqgLBLLHa65oFs5xGa9/nb-NO/cv.json" is 59.02mb which exceeds the maximum size limit of 50mb.

The PDF renders fine locally in npm run dev

Downgrading to version 6 fixes the error

Steps to reproduce

1. Clone https://github.com/w3bdesign/dfweb-v3 (or just use the CV page and component with the PDF)
2. Upgrade to version 7
3. Deploy on Vercel

Expected behavior

I expect no build errors

Actual behavior

Error: The Serverless Function "_next/data/RGgqgLBLLHa65oFs5xGa9/nb-NO/cv.json" is 59.02mb which exceeds the maximum size limit of 50mb. Learn More: https://vercel.link/serverless-function-size
NOW_SANDBOX_WORKER_MAX_LAMBDA_SIZE: The Serverless Function "_next/data/RGgqgLBLLHa65oFs5xGa9/nb-NO/cv.json" is 59.02mb which exceeds the maximum size limit of 50mb.

Additional information

Environment

• Browser (if applicable):
• React-PDF version: 7.0.1
• React version: Next.js 13.3
• Webpack version (if applicable):

[wojtekmaj]

Huh. Built your repo locally with React-PDF 7, and got cv.json of 269 B.

[theAJFM]

Got this one as well, and I think it's caused by canvas getting included as a dependency in pdf.js starting from v3.0.279. Here's a conversation about this: mozilla/pdf.js#15652

[Christian-Schoenlein]

I had this problem too, because I imported the deps (Document, Page, pdfjs) into a NextPage which made them end up in the server bundle too.

I solved it by extracting the PdfViewer and its deps into a different component and then lazy loading it into my NextPage.

PdfViewer component

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

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

type PdfViewerProps = { file: File };

const PdfViewer: FC<PdfViewerProps> = (props) => {
  const { file } = props;

  return (
    <Document file={file}>
      <Page pageNumber={1} />
    </Document>
  );
};

export default PdfViewer;

Import it like this

const PdfViewer= dynamic(() => import("~/components/PdfViewer"), {
  ssr: false,
});

Caveat

For this to work ssr needs to be false, otherwise the canvas package will end up in the server bundle too. Meaning rendering the PdfViewer on the server with SSG, SSR, or ISR is not possible.

[theAJFM]

Next.js's dynamic does work in overcoming the vercel size limit during tracing, but it doesn't prevent the bundler from adding canvas's extra 40MB to the bundle size. Maybe a bit of a nit at this point since you can't really avoid this if you really need to load the PDF server-side, but it's certainly not nothing.

[MattyBalaam]

I found a workaround to stop installing canvas if that might help? We add a new entry to the resolutions object in package.json for canvas:

mozilla/pdf.js#16463

[jakepgoldman]

Any update on how to get around this?

The lazy loading mentioned here does not fix the issue when I try to deploy to Vercel.

[rodumani]

@jakepgoldman

I leveraged the same problem by adding resolutions in package.json.

{
  // Add the following config in package.json
  "resolutions": {
    "react-pdf/**/canvas": "link:./node_modules/.cache/null",
    "pdfjs-dist/canvas": "link:./node_modules/.cache/null"
  }
}

The above config makes it not to install the large canvas package in Vercel serverless deployment.

Wish it can help you too.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[w3bdesign]

I am currently using this as a workaround:

const PdfViewer = dynamic(() => import("./PDFViewer.component"), {
  ssr: false
});

[criskell]

any new?

[raimille1]

For us the resolutions route did not work since we're workign with pnpm and package the app differently. When you look at the original issue here, it is that canvas is being packaged on server side code when for most cases here people are loading it dynamically on the client side. To avoid it being packaged, we added an experimental setting on our next.config.js file outputFileTracingExcludes. For all routes *, do not package 'node_modules/.pnpm/canvas@*`.

For our case specifically we're using pnpm, but your node_modules path to canvas will look differently, just check the output logs for your build and you'll see the tracing outputs that are large. You can safely exclude them here if you're only using them on the client side.

  experimental: {
    outputFileTracingExcludes: {
      // Avoids including canvas in the trace to avoid 50 Mb+ serverless functions
      '*': ['node_modules/.pnpm/canvas@*']
    }
  },

[babyccino]

For us the resolutions route did not work since we're workign with pnpm and package the app differently. When you look at the original issue here, it is that canvas is being packaged on server side code when for most cases here people are loading it dynamically on the client side. To avoid it being packaged, we added an experimental setting on our next.config.js file outputFileTracingExcludes. For all routes *, do not package 'node_modules/.pnpm/canvas@*`.

For our case specifically we're using pnpm, but your node_modules path to canvas will look differently, just check the output logs for your build and you'll see the tracing outputs that are large. You can safely exclude them here if you're only using them on the client side.

  experimental: {
    outputFileTracingExcludes: {
      // Avoids including canvas in the trace to avoid 50 Mb+ serverless functions
      '*': ['node_modules/.pnpm/canvas@*']
    }
  },

@raimille1

This worked for me, thanks! I wish I'd seen it after I'd already spent 3 hours banging my head against the wall but I guess that's just the Next.js life

For npm in case it's not obvious

experimental: {
  outputFileTracingExcludes: {
    // Avoids including canvas in the trace to avoid 50 Mb+ serverless functions
    '*': ['node_modules/canvas*']
  }
},