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.

Sign up for GitHub

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

Jump to bottom

TypeScript types don't work with React 19 #304

Open
eramdam opened this issue Jan 14, 2025 · 4 comments · May be fixed by #305
Open

TypeScript types don't work with React 19 #304

eramdam opened this issue Jan 14, 2025 · 4 comments · May be fixed by #305

Comments

@eramdam
Copy link

eramdam commented Jan 14, 2025

Today I ran into an issue where the types that are shipped with the packages do not work anymore when using React 19 in a TypeScript project. This is because the global JSX namespace has been removed. I managed to fix the issue by making this change using patch-package in my project.

diff --git a/node_modules/@github/relative-time-element/dist/relative-time-element-define.d.ts b/node_modules/@github/relative-time-element/dist/relative-time-element-define.d.ts
index 6465123..58113c8 100644
--- a/node_modules/@github/relative-time-element/dist/relative-time-element-define.d.ts
+++ b/node_modules/@github/relative-time-element/dist/relative-time-element-define.d.ts
@@ -9,6 +9,8 @@ declare global {
     interface HTMLElementTagNameMap {
         'relative-time': RelativeTimeElement;
     }
+}
+declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
             ['relative-time']: JSXBase['span'] & Partial<Omit<RelativeTimeElement, keyof HTMLElement>>;
@keithamus
Copy link
Member

Sounds like a worthwhile change. Do you think it’s backwards compatible or will we need to declare it twice?

@eramdam
Copy link
Author

eramdam commented Jan 14, 2025

I'm honestly not sure, the React 19 upgrade guide makes it sound like it is not backwards-compatible, but I didn't try declaring it twice either (on 18 and 19) 😅

@eramdam
Copy link
Author

eramdam commented Jan 16, 2025 •
edited
Loading

(sorry for the double notification, I messed up the config of the repo when I posted my first, now-deleted, comment)

I made a repro repository and as far as I can tell, the fix is backwards compatible with React 18 / TypeScript 5.6

{
  "dependencies": {
    "@github/relative-time-element": "^4.4.5",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.3.18",
    "globals": "^15.14.0",
    "typescript": "~5.6.2",
  }
}

eramdam added a commit to eramdam/relative-time-element that referenced this issue Jan 16, 2025
@eramdam
Declare relative-element under React.JSX to fix React 19 compatibility
ccd68e0 
Fixes github#304

I had to add a `@ts-expect-error` comment since otherwise the typechecker would complain about missing `react` as a dependency.
@eramdam eramdam linked a pull request Jan 16, 2025 that will close this issue
Open
@eramdam
Copy link
Author

eramdam commented Jan 16, 2025

I opened a PR, let me know what you think #305

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Declare relative-element under React.JSX to fix React 19 compatibility eramdam/relative-time-element
2 participants
@keithamus @eramdam