fix(react): avoid type collision with @types/react@18.2.43 and greater

[sean-perkins]

Issue number: N/A

---

What is the current behavior?

Ionic React projects using @types/react@18.2.43 or greater will run into a type-check error on build with IonRouterOutlet and potentially other components:

Property 'placeholder' is missing in type '{ children: Element[]; }' but required in type 'Pick<IonRouterOutlet & { basePath?: string | undefined; ref?: Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<...>, "color" | ... 254 more ... | "ionPage">'.

Definitely typed decided to make a breaking type change in a patch release: DefinitelyTyped/DefinitelyTyped@b954269

What is the new behavior?

• Patches the type to allow for compatibility between React v16, 17 and 18.

Does this introduce a breaking change?

• Yes
• No

Other information

Testing

1. Create a new Ionic react project with the "list" template.
2. Run npm run build
3. Observe: Exception posted above
4. Install the dev-build
5. Run npm run build
6. Observe: No exception, build passes
7. You can additionally serve the app to verify no runtime exceptions/broken behavior.

Dev-build: 7.6.1-dev.11702322681.17e39348

[puopg]

lol literally just hit this too

[dmatora]

I'm experiencing this on "@types/react": "^18.0.17"
Fixed with npm i @types/react@17.0.71

[sean-perkins]

@dmatora you should look at your lock file, not your package.json. If you install latest dependencies with ^18.0.17 it will resolve the latest minor and patch releases.

[liamdebeasi]

Tested on React 17 as well and did not observe any change in behavior. 👍

[dmatora]

@sean-perkins i created fresh project today (with npx) and it was broken out of the box

[sean-perkins]

@dmatora you will need to use the posted dev-build, the nightly tag or downgrade the version of @types/react until this fix is released in the next patch release of Ionic Framework.

[chepoluis]

Hi 😃, I just add a placeholder={undefined} and it was fixed.

<IonRouterOutlet placeholder={undefined}>
......
</IonRouterOutlet>

I don't know if it is wrong, but it works for me :b