Skip to content

TS2769: No overload matches this call in PDFDownloadLinkΒ #3012

@islam-kamel

Description

@islam-kamel

Describe the bug
Encountering a TypeScript error TS2769: No overload matches this call when using PDFDownloadLink. The error suggests that the provided ({loading}: { loading: any; }) => Element is not assignable to the expected type ReactNode | ReactElement<BlobProviderParams, string | JSXElementConstructor<any>>.

To Reproduce
Steps to reproduce the behavior:

  1. Use PDFDownloadLink with the following setup:

    import { PDFDownloadLink } from '@react-pdf/renderer';
    
    const MyDocument = () => (
      <Document>
        <Page>
          <Text>Hello, world!</Text>
        </Page>
      </Document>
    );
    
    const DownloadLink = () => (
      <PDFDownloadLink document={<MyDocument />} fileName="example.pdf">
        {({ loading }) => (loading ? 'Loading...' : 'Download PDF')}
      </PDFDownloadLink>
    );
  2. Run tsc or start the application.

  3. Observe the TypeScript error:

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

Expected behavior
The PDFDownloadLink should correctly accept the child render function and render "Loading..." while the document is being prepared or "Download PDF" when ready.

Screenshots
image

Desktop (please complete the following information):

  • OS: [Windows]
  • Browser: [Edge]
  • React-pdf version: [4.1.6]
  • TypeScript version: [5.6.2]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions