[BUG]: Possible mismatched types between regular and pure

[dosolkowski-work]

What happened?

When you import loadStripe from @stripe/stripe-js/pure, it returns a value of type Promise<Stripe | null>, but the Stripe that it returns does not match up with the Stripe type that Elements expects. Attempting to export a function that returns it produces an error of the form:

Return type of exported function has or is using name 'Stripe' from external module "C:/Work/Source/repo/ui/node_modules/.pnpm/@[email protected]/node_modules/@stripe/stripe-js/pure/index" but cannot be named.

There doesn't seem to be any way to successfully import npm packages in CodeSandbox without paying so I'm not sure if I have any way to provide a reproduction.

We have been able to work around this by forcibly casting the return type of loadStripe to Promise<Stripe | null> where Stripe is imported from @stripe/stripe-js (note, not /pure) and then suppressing the TypeScript error that is produced:

Argument of type '() => Promise<Stripe | null>' is not assignable to parameter of type 'Promise<Stripe | null> | (() => Promise<Stripe | null>)'.
  Type '() => Promise<Stripe | null>' is not assignable to type '() => Promise<import("C:/Work/Source/repo/ui/node_modules/.pnpm/@[email protected]/node_modules/@stripe/stripe-js/dist/index").Stripe | null>'.
    Type 'Promise<Stripe | null>' is not assignable to type 'Promise<import("C:/Work/Source/repo/ui/node_modules/.pnpm/@[email protected]/node_modules/@stripe/stripe-js/dist/index").Stripe | null>'.
      Type 'Stripe | null' is not assignable to type 'import("C:/Work/Source/repo/ui/node_modules/.pnpm/@[email protected]/node_modules/@stripe/stripe-js/dist/index").Stripe | null'.
        Type 'Stripe' is not assignable to type 'import("C:/Work/Source/repo/ui/node_modules/.pnpm/@[email protected]/node_modules/@stripe/stripe-js/dist/index").Stripe'.
          The types of 'elements(...).getElement' are incompatible between these types.
            Type '{ (elementType: "address"): StripeAddressElement | null; (elementType: "paymentMethodMessaging"): StripePaymentMethodMessagingElement | null; (elementType: "affirmMessage"): StripeAffirmMessageElement | null; (elementType: "afterpayClearpayMessage"): StripeAfterpayClearpayMessageElement | null; (elementType: "auBank...' is not assignable to type '{ (elementType: "address"): import("C:/Work/Source/repo/ui/node_modules/.pnpm/@[email protected]/node_modules/@stripe/stripe-js/dist/index").StripeAddressElement | null; (elementType: "paymentMethodMessaging"): import("C:/Work/Source/repo/ui/node_modules/.pnpm/@[email protected]/node_modules/@strip...'.
              Types of parameters 'elementType' and 'component' are incompatible.
                Type 'AuBankAccountElementComponent' is not assignable to type '"address"'.

It looks like somehow some wires are crossed inside Stripe's types so the /pure form isn't using the same types as the rest of the library.

Environment

Windows 10, TypeScript 5.3.3

Reproduction

No response

[fruchtose-stripe]

Thank you for the report. I've opened #565 to address this.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fruchtose-stripe]

This has now been addressed by #577