DEV Community

Adding Ionic React to an existing React project

Ely Lucas on October 16, 2019

Earlier this week, we launched Ionic React (read the announcement here). To get started with a new Ionic React project is quite easy, but what if y...
Collapse
 
rockinrone profile image
Ronny Ewanek

While attempting to do this, I keep getting the following TS error from imported ionic components such as IonApp, IonContent, and IonButton, but not from IonModal:

Property 'translate' is missing in type '{ children: Element[]; }' but required in type 'Pick

¯_(ツ)_/¯

I've imported the all the CSS .

Collapse
 
elylucas profile image
Ely Lucas Ionic

try updating the @types/react and @types/react-dom to the latest and see if that helps.

Collapse
 
rockinrone profile image
Ronny Ewanek

No luck.

This is an existing React app built with TS. Please let me know if I can provide more info to be helpful!

Thread Thread
 
elylucas profile image
Ely Lucas Ionic

hmm, could you get me the versions of the follow:

@ionic/react
react
react-dom
@types/react
@types/react-dom?

Thanks for helping troubleshoot!

Thread Thread
 
rockinrone profile image
Ronny Ewanek • Edited

"@ionic/react": "^5.0.5",
"@ionic/react-router": "^5.0.5",
"react": "^16.9.0",
"react-dom": "^16.10.2",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",

github.com/ionic-team/ionic/issues...

Collapse
 
garzj profile image
garzj

Seems like this article is outdated. Here is an updated version.

All my ionic components had class="undefined" and the styles were not applied correctly.
This important piece of code was missing:

import { setupIonicReact } from '@ionic/react';
setupIonicReact();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sowmenappd profile image
Sowmen Rahman

Hi there, this looks great! I just had one query. Let's say I used Ionic React with React Suite components (rsuitejs.com), and now I would like to build my app for Android/iOS, would there be any errors e.g. Capacitor errors, etc.?

Collapse
 
jdnichollsc profile image
J.D Nicholls

Any example using ionic icons? I'm getting errors like this: "Mirage: Your app tried to GET 'data:image/svg+xml;utf8,<svg xmlns='http:..."

Thanks in advance!

Collapse
 
jdnichollsc profile image
J.D Nicholls

Nevermind, it was an issue with miragejs, fixed with this config:
this.pretender.get('data:image/*', this.pretender.passthrough);

Cheers!