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.24k stars 877 forks source link

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

Closed w-aurelien closed 11 months ago

w-aurelien commented 11 months 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 11 months ago

What was the last version that worked for you?

w-aurelien commented 11 months ago

What was the last version that worked for you?

7.3.3

w-aurelien commented 11 months ago

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

wojtekmaj commented 11 months ago

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

w-aurelien commented 11 months 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 11 months 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 11 months 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 11 months 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 11 months 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 11 months 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 11 months 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 11 months 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 11 months 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.