[bug] Compile error related to @stripe/react-stripe-js

[michiomochi]

Is there an existing issue for this?

• I have searched the existing issues

Formspree React Version

2.4.1

Formspree Core Version

2.8.1

Current Behavior

I encounter below compile error.

yarn run v1.22.15
$ npx tsc --project tsconfig.eslint.json --noEmit
node_modules/@formspree/react/node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:362:24 - error TS2724: '"/Users/michiomochi/ghq/github.com/refcome/refcome-teams/node_modules/@formspree/core/node_modules/@stripe/stripe-js/types/index"' has no exported member named 'StripePayButtonElementOptions'. Did you mean 'StripePaymentElementOptions'?

362     options?: stripeJs.StripePayButtonElementOptions;
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@formspree/react/node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:367:32 - error TS2694: Namespace '"/Users/michiomochi/ghq/github.com/refcome/refcome-teams/node_modules/@formspree/core/node_modules/@stripe/stripe-js/types/index"' has no exported member 'StripePayButtonElementReadyEvent'.

367     onReady?: (event: stripeJs.StripePayButtonElementReadyEvent) => any;
                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@formspree/react/node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:382:32 - error TS2694: Namespace '"/Users/michiomochi/ghq/github.com/refcome/refcome-teams/node_modules/@formspree/core/node_modules/@stripe/stripe-js/types/index"' has no exported member 'StripePayButtonElementClickEvent'.

382     onClick?: (event: stripeJs.StripePayButtonElementClickEvent) => any;
                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@formspree/react/node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:386:33 - error TS2694: Namespace '"/Users/michiomochi/ghq/github.com/refcome/refcome-teams/node_modules/@formspree/core/node_modules/@stripe/stripe-js/types/index"' has no exported member 'StripePayButtonElementConfirmEvent'.

386     onConfirm: (event: stripeJs.StripePayButtonElementConfirmEvent) => any;
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@formspree/react/node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:396:48 - error TS2724: '"/Users/michiomochi/ghq/github.com/refcome/refcome-teams/node_modules/@formspree/core/node_modules/@stripe/stripe-js/types/index"' has no exported member named 'StripePayButtonElementShippingAddressChangeEvent'. Did you mean 'StripeExpressCheckoutElementShippingAddressChangeEvent'?

396     onShippingAddressChange?: (event: stripeJs.StripePayButtonElementShippingAddressChangeEvent) => any;
                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@formspree/react/node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:400:45 - error TS2724: '"/Users/michiomochi/ghq/github.com/refcome/refcome-teams/node_modules/@formspree/core/node_modules/@stripe/stripe-js/types/index"' has no exported member named 'StripePayButtonElementShippingRateChangeEvent'. Did you mean 'StripeExpressCheckoutElementShippingRateChangeEvent'?

400     onShippingRateChange?: (event: stripeJs.StripePayButtonElementShippingRateChangeEvent) => any;
                                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 6 errors in the same file, starting at: node_modules/@formspree/react/node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:362

Expected Behavior

No compile error.

Steps To Reproduce

Using this library.

• @stripe/react-stripe-js@1.16.5

formspree-react's dependency is below.

formspree-js/packages/formspree-react/package.json

Line 49 in 70bc374

"@stripe/react-stripe-js": "^1.7.1",

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[colevscode]

@bhongy Did we fix this in our DX cleanup?

[bhongy]

@michiomochi Thanks for the detailed steps to reproduce. I couldn't repro the issue using the same versions that you shared, though.

Having said that we did some work on package versioning and updating typescript in @formspree/react@2.4.3 (which would use @formspree/core@2.8.2). Could you give it a try to see if that fixes the issue you run into?

The error looks like you have an incompatible @stripe/react-stripe-js version installed (rather than an issue with an incompatible typescript version or something specific to your tsconfig). I wonder if you have a monorepo setup for your project; I saw that sometimes the npm packages from different monorepo packages cause subtle incorrect version errors. Would you mind sharing your yarn or pnpm lockfile; I can help taking a look.