bug: TypeScript issues when installed Ionic React to an existing React with TS project

[RockinRonE]

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

[RockinRonE]

I created a new React app with TS using Yarn. Added Ionic, and I don't see any TS errors, which makes me think it's something in our app.

I changed the TS version in our app from ^3.7.5 to ~3.7.2 to match the create-react-app version with no luck.

Here's a list of our dependencies.

"dependencies": {
    "@ionic/react": "^5.0.5",
    "@storybook/addon-viewport": "^5.3.7",
    "@types/jest": "24.0.18",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "12.7.4",
    "@types/pluralize": "0.0.29",
    "@types/react": "16.9.2",
    "@types/react-dom": "16.9.0",
    "@types/react-router-dom": "^5.1.0",
    "@types/react-stripe-elements": "^1.3.3",
    "@types/react-test-renderer": "^16.9.1",
    "@types/react-transition-group": "^4.2.2",
    "@types/styled-components": "^4.4.2",
    "@types/underscore": "^1.9.2",
    "@xstate/react": "^0.8.1",
    "axios": "^0.19.0",
    "date-fns": "^2.5.0",
    "date-fns-tz": "^1.0.10",
    "firebase": "^7.3.0",
    "jwt-decode": "^2.2.0",
    "libphonenumber-js": "^1.7.25",
    "pluralize": "^8.0.0",
    "react": "^16.9.0",
    "react-countdown-circle-timer": "^1.1.1",
    "react-dom": "^16.10.2",
    "react-phone-number-input": "^2.3.24",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.3.1",
    "react-stripe-elements": "^5.0.1",
    "react-swipeable": "^5.4.0",
    "react-toastify": "^5.5.0",
    "react-transition-group": "^4.3.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.0",
    "storybook-react-router": "^1.0.8",
    "styled-components": "^4.3.2",
    "styled-tools": "^1.7.1",
    "toastify": "^2.0.0",
    "twilio-chat": "^3.3.1",
    "underscore": "^1.9.1",
    "xstate": "^4.7.7"

"devDependencies": {
    "@storybook/addon-actions": "^5.3.6",
    "@storybook/addon-backgrounds": "^5.3.7",
    "@storybook/addon-knobs": "^5.3.9",
    "@storybook/addon-links": "^5.3.6",
    "@storybook/addons": "^5.3.6",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.6",
    "@testing-library/dom": "^6.12.0",
    "@testing-library/jest-dom": "^4.2.3",
    "@testing-library/react": "^9.4.0",
    "@testing-library/react-hooks": "^3.2.1",
    "@types/enzyme": "^3.10.3",
    "@typescript-eslint/eslint-plugin": "^2.19.0",
    "@typescript-eslint/parser": "^2.19.0",
    "cypress": "^4.0.2",
    "envsub": "^3.0.9",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.15.1",
    "eslint-config-prettier": "^6.10.0",
    "eslint-config-react": "^1.1.7",
    "eslint-plugin-prettier": "^3.1.2",
    "file-loader": "^5.0.2",
    "jest-styled-components": "^6.3.4",
    "prettier": "^1.19.1",
    "typescript": "^3.7.5"
  },

[RockinRonE]

@elylucas The solution to this problem was upgrading @types/react: 16.9.2 to 16.9.25.

Hope this helps others!

[mlynch]

Thanks @RockinRonE, just hit this one myself 😄

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.