[BUG]: React 19 global JSX namespace deprecation

[bagedevimo]

What happened?

As part of the React 19 release they've deprecated the JSX global namespace, in favour of React.JSX.Element. While y'all aren't explicitly using JSX.Element anywhere, it does it appear in the emitted type definition files, specifically:

node_modules/@stripe/react-stripe-js/dist/react-stripe.d.ts:715:79 - error TS2503: Cannot find namespace 'JSX'.

715 declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => JSX.Element;

The "easy" fix for this is to use React 19 in the package.json which shouldn't really cause any changes in your library. I had a little try at this locally and discovered the following diffs - ignoring the crappy one-liner to find all the diffs.

❯ ls -1 dist-before/* | cut -d '/' -f 2 | xargs -I{} bash -c "echo {} && diff dist-before/{} dist/{}"
react-stripe.d.ts
1a2
> import React from "react";
715c716
< declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => JSX.Element;
---
> declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => React.JSX.Element;
react-stripe.esm.d.mts
1a2
> import React from "react";
715c716
< declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => JSX.Element;
---
> declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => React.JSX.Element;
react-stripe.esm.mjs
react-stripe.js
react-stripe.umd.d.ts
1a2
> import React from "react";
715c716
< declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => JSX.Element;
---
> declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => React.JSX.Element;
react-stripe.umd.js
react-stripe.umd.min.d.ts
1a2
> import React from "react";
715c716
< declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => JSX.Element;
---
> declare const EmbeddedCheckout: ({ id, className }: EmbeddedCheckoutProps) => React.JSX.Element;
react-stripe.umd.min.js

However, yarn build now fails due to the script/check-imports script. I'm not 100% sure what the plan with that is, so didn't want to make an pull request without understanding the goal of this script.

Environment

No response

Reproduction

No response

[bagedevimo]

Here's the diff I used to generate the above diffs

❯ git --no-pager diff --no-ext-diff -p
diff --git a/package.json b/package.json
index 01d8843..8ca26d5 100644
--- a/package.json
+++ b/package.json
@@ -74,8 +74,8 @@
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
     "@types/jest": "^25.1.1",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
     "@typescript-eslint/parser": "^2.18.0",
     "babel-eslint": "^10.0.3",
@@ -104,9 +104,6 @@
     "ts-loader": "^6.2.1",
     "typescript": "^4.1.2"
   },
-  "resolutions": {
-    "@types/react": "18.0.5"
-  },
   "peerDependencies": {
     "@stripe/stripe-js": "^1.44.1 || ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
     "react": ">=16.8.0 <20.0.0",
diff --git a/yarn.lock b/yarn.lock
index 831a00a..7d0b7e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2662,6 +2662,11 @@
   dependencies:
     "@types/react" "*"

+"@types/react-dom@^19.0.0":
+  version "19.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.3.tgz#0804dfd279a165d5a0ad8b53a5b9e65f338050a4"
+  integrity sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==
+
 "@types/[email protected]":
   version "11.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
@@ -2669,7 +2674,7 @@
   dependencies:
     "@types/react" "*"

-"@types/react@*", "@types/[email protected]", "@types/react@^18.0.0":
+"@types/react@*":
   version "18.0.5"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301"
   integrity sha512-UPxNGInDCIKlfqBrm8LDXYWNfLHwIdisWcsH5GpMyGjhEDLFgTtlRBaoWuCua9HcyuE0rMkmAeZ3FXV1pYLIYQ==
@@ -2678,6 +2683,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"

+"@types/react@^19.0.0":
+  version "19.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.8.tgz#7098e6159f2a61e4f4cef2c1223c044a9bec590e"
+  integrity sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==
+  dependencies:
+    csstype "^3.0.2"
+
 "@types/[email protected]":
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"

[stale[bot]]

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.

[bagedevimo]

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.

I don't think this should be marked stale - its an ongoing issue. Just commenting to count as activity.

[magnetnation]

This is the only library in our project that holds us from upgrading to React 19. The required change in definitions is minor. Please consider supporting React 19.

[stale[bot]]

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.

[magnetnation]

Any updates?

[bagedevimo]

I've had a crack at solving this in the linked PR.

[brendanm-stripe]

Thanks and apologies for the delay here.

@bagedevimo thanks for the example change -- I'll flag this to the team internally to review and hopefully we can get a patch out.

I was going to ask about backwards compatibility of using React.JSX.Element but this seems somewhat moot given the suggested fix.

[bagedevimo]

Thanks and apologies for the delay here.

@bagedevimo thanks for the example change -- I'll flag this to the team internally to review and hopefully we can get a patch out.

I was going to ask about backwards compatibility of using React.JSX.Element but this seems somewhat moot given the suggested fix.

Thanks! Just wondering if there have been any updates since?

[stale[bot]]

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.

[bagedevimo]

Please don't stale this stale-bot.

[magnetnation]

This cannot be marked as stale. React 19 was released for more than a year ago, and Stripe still cannot properly support it.

[stale[bot]]

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.

[bagedevimo]

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.

Nooope.

[stale[bot]]

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.

[magnetnation]

It looks like this becomes some sort of tradition to keep stale bot from closing this bug. We still need this to be fixed.

[github-actions[bot]]

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.

[bagedevimo]

It's not stale, we still need this!

[github-actions[bot]]

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.

[magnetnation]

Now it is my turn to revive this issue. Please make it finally happen!

[rvolyar-stripe]

This should be resolved as of version 3.9.1. Fix in question. Sorry for the long wait, feel free to open new issue for any other React 19 incompatibilities.