search

wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.
https://projects.wojtekmaj.pl/react-pdf
MIT License
9.51k stars 893 forks source link

[NextJS] React-pdf 7.5.0 - Vercel deployment no longer works #1630

Closed w-aurelien closed 1 year ago

w-aurelien commented 1 year ago

Before you start - checklist

Description

I just upgraded the version of react-pdf to version 7.5.0 and since then my deployments on Vercel are no longer working.

Steps to reproduce

My next.config.com

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverActions: true,
    },
    webpack: (config) => {
        config.resolve.alias.canvas = false;

        return config;
    },
}

module.exports = nextConfig

My Component : 

'use client';

import {Box} from "@chakra-ui/react";
import React from "react";
import { Document, Thumbnail } from 'react-pdf';
import { pdfjs } from 'react-pdf';
import useResizeObserver from "use-resize-observer";

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

interface ThumbnailDocumentProps {
  ...
}

export function ThumbnailDocument({...}: ThumbnailDocumentProps) {
  const {ref, width = 1} = useResizeObserver<HTMLDivElement>();

  if (eventDocument.mimeType === 'application/pdf') {
    return <Box>
       <Document file={`/documents/${eventDocument.id}/visualiser/${eventDocument.originalName}?preview=1`}>
          <Thumbnail
            pageNumber={1}
            width={Math.max(width * 0.4, 100)} />
        </Document>
    </Box>;
  }
}

Expected behavior

Deployment completed :) I want to reiterate that before upgrading the version, my deployments were working correctly.

Actual behavior

Vercel deployment error : 

Error: File /vercel/path0/.next/server/chunks/static/media/pdf.worker.min.6a40b659.js does not exist.
--
10:17:32.381 | at Job.emitDependency (/vercel/path0/node_modules/next/dist/compiled/@vercel/nft/index.js:1:39473)
10:17:32.381 | at async Promise.all (index 10)
10:17:32.382 | at async nodeFileTrace (/vercel/path0/node_modules/next/dist/compiled/@vercel/nft/index.js:1:35430)
10:17:32.382 | at async /vercel/path0/node_modules/next/dist/build/collect-build-traces.js:251:28
10:17:32.383 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:105:20)
10:17:32.383 | at async collectBuildTraces (/vercel/path0/node_modules/next/dist/build/collect-build-traces.js:123:5)
10:17:32.500 | Error: Command "npm run build" exited with 1

Additional information

No response

Environment

wojtekmaj commented 1 year ago

What was the last version that worked for you?

w-aurelien commented 1 year ago

What was the last version that worked for you?

7.3.3

w-aurelien commented 1 year ago

I just realized that I also upgraded the version of nextJS, so I have just conducted the following deployment tests:

wojtekmaj commented 1 year ago

Well, that sounds like a Next.js problem to me then!

w-aurelien commented 1 year ago

I think the two are related no? Maybe NextJs changed something that needs to be reflected in React-Pdf? Because if I remove react-pdf from my dependencies everything works correctly again.

wojtekmaj commented 1 year ago

Clearly something used to work and stopped working. That's a bug/regression by my standards. I'll be happy to assist Vercel should they pick it up.

jerocosio commented 1 year ago

Also getting the same error, it looks like the issue is on the latest version of Vercel NextJS: 13.5.4, as if I downgrade to NextJS: 13.5.3 I can deploy without any issues.

JamesSingleton commented 1 year ago

I just ran into this as well verifying everything built locally. The only thing that I could find that was "worker" related in 13.5.4 was https://github.com/vercel/next.js/pull/55257 but not sure if that would cause any issues. 🤷🏼‍♂️

sangdth commented 1 year ago

I faced this issue, and found another closed issue with similar problem, one comment suggested using the worker from cdn url and it works. I will stick with it for now.

yadhst commented 1 year ago

I also got this problem before, i don't know if this is a good way or not, but the problem is solved.

I am using next.js version 13.5.4 and react-pdf version 7.5.0

// next.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

const pdfjsDistDir = path.dirname(require.resolve("pdfjs-dist/package.json"));
const cMapsDir = path.join(pdfjsDistDir, "cmaps");
const standardFontsDir = path.join(pdfjsDistDir, "standard_fonts");
const pdfWorkerPath = path.join(pdfjsDistDir, "build", "pdf.worker.min.js");

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverActions: true,
    },
    webpack: (config) => {
        config.resolve.alias.canvas = false;

        config.plugins.push(
            new CopyWebpackPlugin({
                patterns: [
                    { from: cMapsDir, to: "static/chunks/pdfjs/cmaps/" },
                ],
            })
        );

        config.plugins.push(
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: standardFontsDir,
                        to: "static/chunks/pdfjs/standard_fonts/",
                    },
                ],
            })
        );

        config.plugins.push(
            new CopyWebpackPlugin({
                patterns: [
                    {
                        from: pdfWorkerPath,
                        to: "static/chunks/pdfjs/build/pdf.worker.min.js",
                    },
                ],
            })
        );

        return config;
    },
};

module.exports = nextConfig;
// in my pdf component
...
pdfjs.GlobalWorkerOptions.workerSrc =
    "/_next/static/chunks/pdfjs/build/pdf.worker.min.js";
const documentOptions = {
    cMapUrl: "/_next/static/chunks/pdfjs/cmaps/",
    standardFontDataUrl: "/_next/static/chunks/pdfjs/standard_fonts/",
};
...
sangdth commented 1 year ago

Thanks @yadh75, I tried your solution and so far it works well.

Btw what does the problem if we combine 3 pushes into one? I'm not really good at webpack:

        patterns: [
          { from: cMapsDir, to: 'static/chunks/pdfjs/cmaps/' },
          {
            from: standardFontsDir,
            to: 'static/chunks/pdfjs/standard_fonts/',
          },
          {
            from: pdfWorkerPath,
            to: 'static/chunks/pdfjs/build/pdf.worker.min.js',
          },
        ],
yadhst commented 1 year ago

Thanks @yadh75, I tried your solution and so far it works well.

Btw what does the problem if we combine 3 pushes into one? I'm not really good at webpack:

        patterns: [
          { from: cMapsDir, to: 'static/chunks/pdfjs/cmaps/' },
          {
            from: standardFontsDir,
            to: 'static/chunks/pdfjs/standard_fonts/',
          },
          {
            from: pdfWorkerPath,
            to: 'static/chunks/pdfjs/build/pdf.worker.min.js',
          },
        ],

there's no problem with that, in fact it's actually better that way

wojtekmaj commented 1 year ago

Hey all, Vercel confirmed it's a bug on their side. I suggest following https://github.com/vercel/next.js/issues/56676 for updates. There's nothing we can or should do on our side, so I'm closing this issue.