Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeScript Error in PDFDownloadLink with React-PDF v4 #2886

Open
islam-kamel opened this issue Sep 26, 2024 · 14 comments · May be fixed by #2888
Open

TypeScript Error in PDFDownloadLink with React-PDF v4 #2886

islam-kamel opened this issue Sep 26, 2024 · 14 comments · May be fixed by #2888

Comments

@islam-kamel
Copy link

islam-kamel commented Sep 26, 2024 •
edited
Loading

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
@islam-kamel islam-kamel changed the title ypeScript Error in PDFDownloadLink with React-PDF v4 TypeScript Error in PDFDownloadLink with React-PDF v4 Sep 26, 2024
@islam-kamel islam-kamel mentioned this issue Sep 26, 2024
Closed
@fedeevilla
Copy link

Same thing here, any fix?

islam-kamel added a commit to islam-kamel/react-pdf that referenced this issue Sep 26, 2024
@islam-kamel
fix: resolve diegomura#2886 TypeScript error in PDFDownloadLink compo…
8a04cbc 
…nent with react-pdf v4
@islam-kamel
Copy link
Author

Same thing here, any fix?

Yes, I have already created PR #2888.

@islam-kamel islam-kamel linked a pull request Sep 26, 2024 that will close this issue
Open
@DavidCodesDev
Copy link

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
Copy link
Author

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
Copy link

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
Copy link

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

@holvold
Copy link

holvold commented Sep 30, 2024

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

@ElectricCodeGuy
Copy link

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
Copy link
Author

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

HuguesBlanco added a commit to HuguesBlanco/get-cv that referenced this issue Sep 30, 2024
@HuguesBlanco
Downgrade @react-pdf/renderer to resolve TypeScript issue
0c23982 
After upgrading to version 4, a TypeScript issue occurred with <PDFDownloadLink>. Downgrading the library resolved the issue as described this issue: diegomura/react-pdf#2886 (comment).
@fernando-mendoza
Copy link

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
Copy link
Author

islam-kamel commented Oct 1, 2024 •
edited
Loading

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
9 participants
@fedeevilla @DavidCodesDev @holvold @fernando-mendoza @islam-kamel @Barata-Ribeiro @ElectricCodeGuy and others