react-pdf: Uncaught TypeError: Cannot perform Construct on a detached ArrayBuffer

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

I setup a simple component like

<Document
  file={file}
  options={{
    cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
    standardFontDataUrl: 'standard_fonts/',
  }}
>
  {Array.from(new Array(numPages), (el, index) => (
    <Page key={`page_${index + 1}`} pageNumber={index + 1} />
  ))}
</Documnet>

File is provided via props and changes only when I provide a different file from file input

Whenever I provide a PDF file for the first time, it works fine. When I want to change a PDF file it breaks with

Steps to reproduce

Just try to play around with a react PDF

Expected behavior

App is not crashing and rendered PDF file has been changed

Actual behavior

App is crashing.

Additional information

No response

Environment

Browser (if applicable): ARC 0.109.0
React-PDF version: 7.1.2
React version: 17.0.2
Webpack version (if applicable): 5.70.0

About this issue

Original URL
State: closed
Created a year ago
Reactions: 4
Comments: 16 (3 by maintainers)

Most upvoted comments

I’ve also noticed this after upgrading from v6.2.2 to 7.2.0. In our app, this error is thrown when unmounting and remounting Document with the same ArrayBuffer file. I haven’t been able to repro this with URLs and File objects.

I’m not sure what’s causing this either, but I’ve managed to prevent ArrayBuffer files from being detached by passing in a slice instead of the original buffer:

const fileSlice = useMemo(() => file.slice(0), [file]);
...
return <Document file={fileSlice} />;

taneliang on Jul 27, 2023

i get this error after mount after unmount. someone knows what is the cause?

Update: this fixed it for me: instead of using blob.arrayBuffer() i simply used Blob as a file to render the pdf.

Eliav2 on Jan 21, 2024

Because /collected data/ are from an async call. pdfData can’t be a Promise.

JorisMARTIN on Aug 11, 2023