Failed to load PDF file when using Next.js

[eugenestepaniuk]

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

When downloading a pdf file, it appears warnings in console and Failed to load PDF file

https://codesandbox.io/s/react-pdf-example-6ikmdn?file=/pages/index.tsx

Steps to reproduce

1. Click Link 'Groups'
2. Select any item
3. On item page Failed to load PDF file

Expected behavior

Correct loading PDF File

Actual behavior

Failed to load PDF file

Additional information

No response

Environment

• Browser (if applicable): Chrome 103.0.5060.53
• React-PDF version: 5.7.2
• React version: 18.1.0
• Webpack version (if applicable):

[mynameisankit]

Have you tried using different text encodings, specifically base64? If nothing works, try preserving the Node.js object and manually convert it to uint array on the frontend and pass it.

[wojtekmaj]

In your code, you defined file="./software.pdf", which while you're at https://idfkkf.sse.codesandbox.io/funds/1 points to https://6ikmdn.sse.codesandbox.io/funds/software.pdf, which is not a valid URL of your PDF.

The correct file prop in this case would be file="/software.pdf"

Once you fix this, you'll be hit by another issue. You can't run React-PDF in SSR, as you can't really render canvas on the server side. So, to fix this, you'll need to asynchronously load React-PDF after mount (which happens only on browser side).

[otarasovqs]

Same problem
npx create-react-app
react 18

Failed to load pdf