bug: TypeScript issues when installed Ionic React to an existing React with TS project #20855
Description
Bug Report
Ionic version:
[x] ** "@ionic/react": "^5.0.5",**
Current behavior:
I followed your article about how to integrate Ionic into an existing React app. However, I keep seeing TS errors such as:
For IonContent:
Property 'translate' is missing in type '{ children: Element[]; }' but required in type 'Pick<HTMLAttributes<HTMLIonContentElement>, "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "translate">'. TS2741
For IonButton:
Property 'translate' is missing in type '{ children: string; onClick: () => void; }' but required in type 'Pick<HTMLAttributes<HTMLIonButtonElement>, "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "translate">'. TS2741
Expected behavior:
I thought I would be able to install Ionic to my existing React TS project. I installed it, added the CSS imports to my root index.tsx. I assumed I would be able to try out individual Ionic components to see if it was right for our project at work.
Steps to reproduce:
I followed the article up until installing the Router.
Related code:
An example of how I'm trying to use it. I copied and pasted this from Ionic's site:
<IonContent>
<IonModal isOpen={showModal}>
<p>This is modal content</p>
<IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>
<IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
</IonContent>
IonContent and both IonButton's throw a TS error, however IonModal does NOT.
Ionic info:
[WARN] You are not in an Ionic project directory. Project context may be
missing.
Ionic:
Ionic CLI : 6.3.0
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v10.16.0
npm : 6.13.4
OS : macOS Catalina