Ionic 5/6 support for react 18 with typescript

Ionic Framework
1

I have upgraded to react 18, but not managing to get my ionic 5 react app components with typescript to work with the upgrade.
I keep on getting the following error on various components such as IonReactRouter:
Type ‘{ children: Element; }’ has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly’

Seems like this is because with react 18 the children prop now needs to be listed explicitly when defining props.
When upgrading to ionic 6 it didn’t seem to solve the issue

Does ionic fully support react 18 and does it require upgrading to ionic 6? and if so what am I doing wrong?

1 Like
2

Yeah, the ionic-framework has a number of areas where the types need to be updated.

This is an example of how to “patch” it. Not great though

import { NavManager as BadNavManager } from '@ionic/react';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const NavManager = BadNavManager as any;

I tried updating the react typedefs with my own declaration but didn’t have much luck.

On one hand, React 18 was in beta long enough to have this ready to go on release by the Ionic team. On the other hand, Facebook is a pain, and React seems to be getting bloated and keeps avoiding standards. The fact that the ionic team has to do all sorts of strange wrapping of Web Components to get them to work with React is pretty lame. Facebook could just choose to properly support the custom components standards built into browsers.

1 Like
3

Any luck with this? I’m getting the same error.

4

I fixed this by adding the declaration

interface Props {
  children: React.ReactNode;
}

and

const WhatEverYourComponentMightBe: React.FC<Props> = ({ children }) => {
1 Like