TypeScript Error in PDFDownloadLink with React-PDF v4

[islam-kamel]

Describe the bug After updating to react-pdf v4, I encountered a TypeScript error when using the PDFDownloadLink component. The error occurs when passing a render prop to PDFDownloadLink, specifically when destructuring the BlobProviderParams.

The following TypeScript error is shown:

TS2769: No overload matches this call.
Overload 1 of 2,
(props: PDFDownloadLinkProps): PDFDownloadLink,
gave the following error.
Type ({ loading }: BlobProviderParams) => JSX.Element
is not assignable to type ReactNode | ReactElement<BlobProviderParams, string | JSXElementConstructor<any>>.

To Reproduce

1. Install or update to react-pdf v4.
2. Use the PDFDownloadLink component with a render prop that returns JSX.
3. Destructure the loading prop from the render function.
4. TypeScript throws the above error.

<PDFDownloadLink
  className="text-decoration-none"
  document={<InvoicePdf invoice={invoice} hideDescription={hideDescription} />}
  fileName={`Invoice-${invoice?.invoiceID}.pdf`}
>
  {({ loading }) => (
    <SpinnerButton spin={loading} variant="outline-dark" size="sm">
      <div>
        Download Invoice
        <i className="bi bi-download ms-1" />
      </div>
    </SpinnerButton>
  )}
</PDFDownloadLink>;

Expected behavior The PDFDownloadLink component should work as expected and correctly handle the render prop with the BlobProviderParams state, without any TypeScript errors.

Desktop (please complete the following information):

• OS: Windows
• Browser edge
• React-pdf version 4.0.0

[fedeevilla]

Same thing here, any fix?

[islam-kamel]

Same thing here, any fix?

Yes, I have already created PR #2888.

[DavidCodesDev]

I have the same error, in local development build it works, but not on production, this used to work...

I'm on version 3.4.4

[islam-kamel]

I have the same error, in local development build it works, but not on production, this used to work...

I'm on version 3.4.4

@DavidCodesDev

It seems like you're experiencing a production issue with version 3.4.4 of react-pdf. Here are a few steps you can try to resolve this:

1. Check for Differences: Ensure there are no differences in the environment configurations between your local development environment and the production environment.

2. Dependencies: Verify that all dependencies are installed correctly and that there are no version mismatches.

3. Rebuild: Try clearing the build cache and rebuilding your production build.

[Barata-Ribeiro]

I, too, am having the same problem. As a temporary fix, I overwrote the react-pdf types in my project using the solution provided by @islam-kamel in the #2888 pr. At least, it worked for me.

[DavidCodesDev]

Fixed for me when I upgraded to v4 and downgraded back to 3.4.4 (3.4.5 also was bugged)

[holvold]

I have the same issue using"@react-pdf/renderer": "^4.0.0" Would be nice to see this fixed in the next version!

[ElectricCodeGuy]

Not sure if this is related to this, but if you are usingNextjs and have some errors after upgrading you can move everything that uses this package into its own component and then import it into another component using:

import dynamic from 'next/dynamic'; and setting ssr: false

[islam-kamel]

Not sure if this is related to this, but if you are usingNextjs and have some errors after upgrading you can move everything that uses this package into its own component and then import it into another component using:

import dynamic from 'next/dynamic';

and setting ssr: false

@ElectricCodeGuy

The error will probably continue to appear within the own component

[fernando-mendoza]

I, too, am having the same problem. As a temporary fix, I overwrote the react-pdf types in my project using the solution provided by @islam-kamel in the #2888 pr. At least, it worked for me.

I'm not too experienced with nodejs, could you please explain how to temporary fix this? Thanks in advance!

[islam-kamel]

I, too, am having the same problem. As a temporary fix, I overwrote the react-pdf types in my project using the solution provided by @islam-kamel in the #2888 pr. At least, it worked for me.

I'm not too experienced with nodejs, could you please explain how to temporary fix this?

Thanks in advance!

@fernando-mendoza

Add this @ts-ignore as comment just above the function to stop typescript checking

[ElectricCodeGuy]

Not sure if this is related to this, but if you are usingNextjs and have some errors after upgrading you can move everything that uses this package into its own component and then import it into another component using: import dynamic from 'next/dynamic'; and setting ssr: false

@ElectricCodeGuy

The error will probably continue to appear within the own component

Depends what the error is.

In my case it is only the SSR part that caused the issue. So disabling SSR for the client leaf fixed it, with no errors inside the component.

[joharkhan99]

I faced the same issue with showing loader. After going through their documentation I found that they had a hook called usePDF(). which is really useful. So basically you pass your document and it returns four things

{ loading: boolean; blob: Blob | null; url: string | null; error: string | null; }

Now the loading field is kinda freaky and is always true and sometimes it turns to false. So don't use that, Instead use the blob field. The blob is initially null and as soon as the document is generated it is set to an object. so u will get something like this in blob field

blob: Blob { size: 780267, type: "application/pdf" }

Here is my implementation:

import { PDFDownloadLink, usePDF, Text, Page} from '@react-pdf/renderer';

const MyDocument = ()=>{
  return (
    <Document>
      <Page><Text>This is working</Text></Page>
    </Document>
  )
}

const App = () => {
  // this returns {loading,blob,url,error}
  const [pdf] = usePDF({
    document: <MyDocument />,  // pass your document
  });

  return (
    <PDFDownloadLink document={<MyDocument />} fileName="Report Testing">
          {pdf.blob ? 'Download PDF' : 'Loading...'}  //  <-- loading here
     </PDFDownloadLink>
  )
}

export default App;

Hope this solves the issue