Ionic 4.9.1 React App Template Compile Error

Ionic Framework
1

Hi folks, just getting started with Ionic / React and ran into a compile error creating a new app using both the Blank and Side Menu templates:

I created a new app using the NPM CLI, and it is created successfully, but when I go to run it with the “ionic serve” command the following error appears:

> react-scripts.cmd start
[react-scripts] Starting the development server...
[react-scripts]
[react-scripts] Failed to compile.
[react-scripts]
[react-scripts] C:/.../src/App.tsx
[react-scripts] TypeScript error in C:/.../src/App.tsx(45,4):
[react-scripts] Type '{ children: Element; }' is missing the following properties from type 'Pick<IonicReactExternalProps<IonApp & ReactProps, HTMLIonAppElement>, "hidden" | "dir" | "slot" | "style" | "title" | "contextmenu" | "color" | "key" | "children" | "accessKey" | ... 157 more ... | "onTransitionEndCapture">': hidden, dir, slot, style, and 162 more.  TS2740
[react-scripts]     43 |
[react-scripts]     44 | const App: React.FC = () => (
[react-scripts]   > 45 |   <IonApp>
[react-scripts]        |    ^
[react-scripts]     46 |     <IonReactRouter>
[react-scripts]     47 |       <IonSplitPane contentId="main">
[react-scripts]     48 |         <Menu appPages={appPages} />

I realize this is still in beta and maybe there is another place to post this, but I don’t see any categories for either beta testing or ionic with react.

Thanks!

2

Same for me after running ionic start myApp tabs then ionic serve

3

Thanks, glad it isn’t just me. I also tried from scratch using the blog at Announcing the Ionic React Beta

The docs at Ionic React were last updated two weeks ago, so perhaps something changed in the latest release. I tried following those as well.

4

Hi ! I solve this error updating to

“@ionic/react”: “^4.10.0-rc.3”,
“@ionic/react-router”: “^4.10.0-rc.3”,

in my package.json

Regards

1 Like
5

Thanks for sharing! This solved my issue. I tried a bit of configuration on the package.json but thought it was more related to types modules.

6

Worked like a charm, once I updated to the latest react components with…

npm install @ionic/react @ionic/react-router

…and updated the package.json as @jcorrea specified the app compiled without error. Thank you!!

Hope this helps others.