TypeError: Eo is not a function when deleting in React-PDF

Question

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)

The library that is used is react-pdf.

    "@react-pdf/renderer": "^4.3.0",
    "react": "^19.1.0",

Tony Polinelli · Accepted Answer · 2025-06-05 01:18:16Z

1

It is a rendering bug in react-pdf. I found that since it only occurs on delete, you can render the pdf in a new instance by setting key={x} on PDFViewer each time the data changes (clone your data object). This forces a render from scratch, avoiding the issue:


export const PDFPreview: React.FC<InvoicePDFPreviewProps> = ({
  formData,
}) => {
  const count = useRef(0);
  useEffect(() => {
    count.current++;
  }, [formData]);
  return (
    <div className="w-full h-[600px] border rounded-lg overflow-hidden">
      <PDFViewer width="100%" height="100%" key={count.current}>
        <InvoiceDocument formData={formData} />
      </PDFViewer>
    </div>
  );
};

then:
<PDFPreview formData={clonedFormData}} />

answered Jun 5 at 1:18

Tony Polinelli

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

Blazej A Jun 24 at 11:08

This solution works well. You may need to apply this also for PDFDownloadLink component.

Carlos Esteban Lopez Jaramillo Oct 26 at 22:58

Dude, saved my bacon, one of my engineers was generating blobs to avoid the viewer, thanks a lot.

Merlin Y · Accepted Answer · 2025-04-21 23:03:38Z

0

I had the same problem. When the rendered pdf is on screen and user delete an item, the app crashes. My hacky solution is to hide the pdf before re-rendering and display it back afterwards

  const removeStuff = () => {
    showPdf(() => false);

    updateState()

    setTimeout(() => {
      showPdf(() => true);
    }, 1);
  };

answered Apr 21 at 23:03

Merlin Y

132 bronze badges

1 Comment

Dayson D May 1 at 19:36

I tried this but it still doesn't work. I am pretty sure the component is not even mounted, at least useEffect with state as dependency did not fire when I update the state, but somehow the PDF is still connected to the states and as long as I save the state I get this error. and the PDF viewer is not even visible on the screen. How did you fix it?

J_P · Accepted Answer · 2025-04-24 05:48:05Z

0

So I did find another solution. Very simple but it does the job. I've added a status property in the object, when deleting the status is changing Then using styling{display: skill.status === 'delete' ? 'none' : 'flex'}

docs

answered Apr 24 at 5:48

J_P

1901 gold badge2 silver badges13 bronze badges

2 Comments

Dayson D May 1 at 19:36

I tried this but it still doesn't work. I am pretty sure the component is not even mounted, at least useEffect with state as dependency did not fire when I update the state, but somehow the PDF is still connected to the states and as long as I save the state I get this error. and the PDF viewer is not even visible on the screen. How did you fix it?

J_P May 2 at 5:23

@DaysonD can you share some code?

mrr.falah · Accepted Answer · 2025-07-11 12:39:14Z

you can add suspense key

import PrintTablePdf from "./tables/print-table-pdf";

const OwnerContent: React.FC<PageProps> = async ({ searchParams }) => {
  const cookieStore = await cookies();

  const search = searchParamsCacheOrder.parse(await searchParams);

  const [
    { data: dataCategorys },
    { data: dataOrders, total, error: errorOrder },
  ] = await Promise.all([
    fetchCategorys(cookieStore),
    getAllOrdersForSuperadmin(search),
  ]);

  if (!dataOrders || errorOrder) throw new Error(errorOrder);

  return (
    <Suspense
      key={dataOrders.length}
      fallback={
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="flex items-center justify-between"
          disabled={true}
        >
          <Loader2 className="animate-spin" />
          Please wait
        </Button>
      }
    >
      <PrintTablePdf
        document={<TablePdfOrderOwner data={dataOrders} />}
        fileName="laporan-order.pdf"
        className="flex w-0 pb-2 pl-1"
      />
    </Suspense>
  );
};



"use client";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { DocumentProps, PDFDownloadLink } from "@react-pdf/renderer";
import { FileText, Loader2 } from "lucide-react";
import type { ReactElement } from "react";

export default function PrintTablePdf({
  document,
  trigger,
  fileName = "laporan-order.pdf",
  className,
}: {
  document: ReactElement<DocumentProps>;
  trigger?: React.ReactNode; 
  fileName?: string;
  className?: string;
}) {
  return (
    <PDFDownloadLink
      document={document}
      fileName={fileName}
      className={cn(className)}
    >
      {({ loading }) =>
        loading ? (
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="flex items-center justify-between"
            disabled={true}
          >
            <Loader2 className="animate-spin" />
            Please wait
          </Button>
        ) : (
          trigger || (
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="flex items-center justify-between"
            >
              <FileText />
              Cetak PDF
            </Button>
          )
        )
      }
    </PDFDownloadLink>
  );
}

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

TypeError: Eo is not a function when deleting in React-PDF

4 Answers 4

2 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related