Bug deleting dynamic content in pdf viewer

[personalspace98]

I'm trying to generate a PDF based on user input. The user can add, update, and delete items to a list. The list is a redux slice where the state is kept

Adding and updating are working but for some reason when I delete an item. I get the error
Eo is not a function TypeError: Eo is not a function

My initial thought is that how the rendering process works, that the pdf isn't repainted but the existing pdf is changed. Not sure of if I'm in the right direction

PdfPreview.tsx
return ( <PDFViewer key='testing' width="100%" height={window.innerHeight} showToolbar={false}> <DefaultPdf personaData={throttledPersonaData} secondaryColor={props.secondaryColor} experiences={throttledExperiencesData} /> </PDFViewer> );

DefaultPdf.tsx
<View> <WorkPdf works={work}/> </View>

Work.tsx
export const WorkPdf: React.FC<WorkPdfProps> = ({ works }: WorkPdfProps) => { const t = works.map((v, i) => { return ( <Text key={i}>{v.role}</Text> ) }) return ( <View> <Text >Work</Text> {t} </View> ) }

I can confirm:
That the variables that are displayed in the pdf are all strings
The array is empty array.

I would have expect that the pdf is repainted and so the items are updated (or in this case, deleted)

[personalspace98]

Also adding
if (works.length === 0) { return <Text>No work experience</Text> } in the work component gives a eo error when adding a component

[elitan]

I had the same issue and solved it by not creating a custom component that used this lib's components. Instead, I had to inline everything.

[Rikthepixel]

I had the same issue. I am not entirely sure why the error occurs. I did a little digging, and the issue may lie in the diff-checking of react-reconsiler v0.31. Which is what @react-pdf/renderer uses for React v19 to create a custom React renderer.

Long story short my temporary fix is to give a key that changes every time the PDF parent element is rendered. My data doesn't change that often, so in this example I used Date.now(). You might want to use an actual incrementing counter.

<PDFDownloadLink
  key={Date.now()} // Changes every rerender. 
  document={pdfDocument}
  fileName="My lovely PDF"
>
  Download PDF
</PDFDownloadLink>

[legions-developer]

I had the same issue. I am not entirely sure why the error occurs. I did a little digging, and the issue may lie in the diff-checking of react-reconsiler v0.31. Which is what @react-pdf/renderer uses for React v19 to create a custom React renderer.

Long story short my temporary fix is to give a key that changes every time the PDF parent element is rendered. My data doesn't change that often, so in this example I used Date.now(). You might want to use an actual incrementing counter.

<PDFDownloadLink
key={Date.now()} // Changes every rerender.
document={pdfDocument}
fileName="My lovely PDF"

Download PDF

This works for me thanks

[codebravotech]

I have a super simple page where I render a PDFViewer (bascially view only, no interactive elements besides the pdf viewer itself, i'm using it for a simple demo page of a feature for serializing Sanity Portable Text to ReactPDF components).

Whenever I would save a code change, the pdf viewer would break until I reload the browser.

Wrapping in useMemo did not work for me - I borrowed a workaround from @Rikthepixel (I really hope that's a pickle rick reference lolll) and gave the PDFViewer a key based on the current Date: #3153. In my simple case that solved it and hasn't caused any other issues.

[Rikthepixel]

@codebravotech Good to hear that the workaround worked! I see that in the thread you mentioned they also haven't found an (actual) solution. I guess we just gotta hope that either a react-reconsiler update would fix it, or someone finds an actual solution and makes a PR

Off-topic. It lowkey has become a Pickle Rick reference lol. Believe it or not, but I have been using this nickname since before that 😝

[fvlahov]

If anyone is still struggling with this issue, a workaround for me was to wrap my map function in a <View render={() => (items.map(...))}.

My use case was I was rendering a list of items (which you could change in runtime), I always got a Eo is not a function TypeError: Eo is not a function error when removing an item.

Example:

<View render={() => (
                items.map((item, index) => (
                          ...
                ))
            )}
/>

Docs: https://react-pdf.org/advanced#dynamic-content

[aaroncampecino]

@Rikthepixel workaround fixed for me. it has something to do with keys, mine is to generate invoice per month/year, so I added those data in my keys

key={${selectedMonth}-${selectedYear}-${index}}

[fiftythanks]

I have the same issue. Sadly, the @Rikthepixel's workaround didn't help.

UPD: but the @fvlahov's solution helped and worked perfectly. Thank you very much!