bug: Issues with React 19 types

[aeharding]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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 :)

[tanner-reits]

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

[aeharding]

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

[jack-hanlon]

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

[ptmkenny]

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

Is there a timeline when this will be fixed?

[aeharding]

Not I've heard

Please 👍 up the issue if you would like it addressed

[jadejr]

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

[ptmkenny]

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

[YounesAmalouSSCA]

as @ptmkenny said, if you are using vite, you can skip the tsc command as a temporary workaround, but still, upgrading to React 19 might require ts adjustments.

[zoy-l]

import {
  IonTabs as IonicIonTabs,
  IonTabButton as IonicIonTabButton,
  IonApp as IonicIonApp,
  IonBackButton as IonicIonBackButton
} from '@ionic/react'

export const IonTabs = IonicIonTabs as React.ComponentType<
  ConstructorParameters<typeof IonicIonTabs>[0]
>

export const IonTabButton = IonicIonTabButton as React.ComponentType<
  ConstructorParameters<typeof IonicIonTabButton>[0] & { children: React.ReactNode }
>

export const IonApp = IonicIonApp as React.ComponentType<
  ConstructorParameters<typeof IonicIonApp>[0]
>

export const IonBackButton = IonicIonBackButton as React.ComponentType<
  ConstructorParameters<typeof IonicIonBackButton>[0]
>

Here’s my temporary solution