search

formspree / formspree-js

The fastest way to hook up a React form
https://formspree.io/javascript
MIT License
62 stars 12 forks source link

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

Open michiomochi opened 1 year ago

michiomochi commented 1 year ago

Is there an existing issue for this?

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.

formspree-react's dependency is below. https://github.com/formspree/formspree-js/blob/70bc374f36c40f921d7b9d795ec381d23bb3545a/packages/formspree-react/package.json#L49

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

No response

Anything else?

No response

colevscode commented 1 year ago

@bhongy Did we fix this in our DX cleanup?

bhongy commented 1 year ago

@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.