Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG]: React 19 global JSX namespace deprecation #569

Open
bagedevimo opened this issue Feb 7, 2025 · 1 comment
Open

[BUG]: React 19 global JSX namespace deprecation #569

bagedevimo opened this issue Feb 7, 2025 · 1 comment
Labels
bug Something isn't working

Comments

@bagedevimo
Copy link

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 bagedevimo added the bug Something isn't working label Feb 7, 2025
@bagedevimo
Copy link
Author

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant