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

bug: Issues with React 19 types #29991

Open
3 tasks done
aeharding opened this issue Nov 3, 2024 · 8 comments · May be fixed by #30085
Open
3 tasks done

bug: Issues with React 19 types #29991

aeharding opened this issue Nov 3, 2024 · 8 comments · May be fixed by #30085
Labels
package: react @ionic/react package type: bug a confirmed bug report

Comments

@aeharding
Copy link
Contributor

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

I've been playing with React 19. I've noticed that Ionic has issues with some of the React 19 types. (This PR is proposed by core React team.)

DefinitelyTyped/DefinitelyTyped#69022

Some components do work, like IonButton. But lots don't, like IonBackButton and IonApp:

'IonBackButton' cannot be used as a JSX component.
  Its type '{ new (props: Props | Readonly<Props>): { context: NavContextState; clickButton: (e: MouseEvent<Element, MouseEvent>) => void; ... 17 more ...; UNSAFE_componentWillUpdate?(nextProps: Readonly<...>, nextState: Readonly<...>, nextContext: any): void; }; new (props: Props, context: any): { ...; }; readonly displayName:...' is not a valid JSX element type.

Expected Behavior

All components work with React 19.

Given that React 19 will be released imminently, I think it would be smart to get ahead of this :)

Steps to Reproduce

  1. Open https://stackblitz.com/edit/i9zdvi-adpda9
  2. Observe type issues with

Code Reproduction URL

https://stackblitz.com/edit/i9zdvi-adpda9

Ionic Info

Running stackblitz

Additional Information

Good news: Ionic works great with 19 so far in my testing, just issues with types :)
@ionitron-bot ionitron-bot bot added the triage label Nov 3, 2024
@tanner-reits
Copy link
Member

@aeharding Thanks for letting us know! Since React 19 and the associated types aren't released yet, this will be something we have to wait on for the time being. I'll make sure this is labeled so we can keep track of it and ensure everything is working when React 19 comes around.

@tanner-reits tanner-reits added package: react @ionic/react package type: bug a confirmed bug report and removed triage labels Nov 5, 2024
@aeharding
Copy link
Contributor Author

React 19 released today! 🚀 https://react.dev/blog/2024/12/05/react-19

@jack-hanlon
Copy link

is this fixed now ? wondering whether i should upgrade to React 19 yet or if it will break my ionic codebase ?

@ptmkenny
Copy link

ptmkenny commented Dec 8, 2024

@jack-hanlon No, it's not fixed. When it is fixed, there will be a commit referenced on this issue and the issue will be closed.

@Berkmann18
Copy link

Is there a timeline when this will be fixed?

@aeharding
Copy link
Contributor Author

Not I've heard

Please 👍 up the issue if you would like it addressed

@ptmkenny ptmkenny linked a pull request Dec 15, 2024 that will close this issue
Open
2 tasks
@jadejr
Copy link

jadejr commented Dec 17, 2024

Are the types and perhaps any dependency pinning the only problems with using ionic with react 19?

@ptmkenny
Copy link

@jadejr Things seem to work, but you should test your own project and see what happens. If you're using vite, just remove tsc --noEmit from your build step and the type errors will be ignored, allowing you to use React 19 now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: react @ionic/react package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(react): update @types/react to v19+ ptmkenny/ionic-framework
6 participants
@ptmkenny @aeharding @Berkmann18 @jack-hanlon @tanner-reits @jadejr