search

ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

bug: Error from IonReactRouter when upgrading to v7 #29105

Closed DunhamGitHub closed 7 months ago

DunhamGitHub commented 7 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

Error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.ts(2559)

Screenshot 2024-03-01 at 13 26 43

Node 20 (LTS)

{
  "name": "test",
  "version": "1.8.0",
  "description": "An Ionic project",
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.22",
    "@capacitor/android": "^5.7.0",
    "@capacitor/app": "^5.0.7",
    "@capacitor/cli": "^5.7.0",
    "@capacitor/core": "^5.7.0",
    "@capacitor/haptics": "^5.0.7",
    "@capacitor/ios": "^5.7.0",
    "@capacitor/keyboard": "^5.0.8",
    "@capacitor/status-bar": "^5.0.7",
    "@ionic/core": "^7.7.3",
    "@ionic/react": "^7.7.3",
    "@ionic/react-router": "^7.7.3",
    "@types/jest": "29.5.12",
    "@types/node": "20.11.20",
    "@types/react": "^18.2.57",
    "@types/react-dom": "^18.2.19",
    "@types/react-router": "^5.1.16",
    "@types/react-router-dom": "^4.3.5",
    "canvas": "^2.11.2",
    "ionicons": "^7.2.2",
    "jsdom": "^24.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intl": "^6.2.2",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "typescript": "4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    "Chrome >=79",
    "ChromeAndroid >=79",
    "Firefox >=70",
    "Edge >=79",
    "Safari >=14",
    "iOS >=14"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "eslint": "^8.56.0",
    "react-scripts": "^5.0.1"
  }
}

Expected Behavior

I expect no error. Worked with Node@12

Steps to Reproduce

  1. Install Node@20 with Homebrew (MacOS)
  2. npm i -g @ionic/cli
  3. Copy package.json (code below)
  4. Copy App.tsx (code below)
  5. Run npm install
  6. -> Error in App.tsx (see screenshot)

File: "package.json"

{
  "name": "mxmobile",
  "version": "1.8.0",
  "description": "An Ionic project",
  "private": true,
  "_checkLatestVersionHere": "https://www.npmjs.com/package/@types/node",
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.22",
    "@capacitor/android": "^5.7.0",
    "@capacitor/app": "^5.0.7",
    "@capacitor/cli": "^5.7.0",
    "@capacitor/core": "^5.7.0",
    "@capacitor/haptics": "^5.0.7",
    "@capacitor/ios": "^5.7.0",
    "@capacitor/keyboard": "^5.0.8",
    "@capacitor/status-bar": "^5.0.7",
    "@ionic/core": "^7.7.3",
    "@ionic/react": "^7.7.3",
    "@ionic/react-router": "^7.7.3",
    "@types/jest": "29.5.12",
    "@types/node": "20.11.20",
    "@types/react": "^18.2.57",
    "@types/react-dom": "^18.2.19",
    "@types/react-router": "^5.1.16",
    "@types/react-router-dom": "^4.3.5",
    "canvas": "^2.11.2",
    "ionicons": "^7.2.2",
    "jsdom": "^24.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intl": "^6.2.2",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "typescript": "4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    "Chrome >=79",
    "ChromeAndroid >=79",
    "Firefox >=70",
    "Edge >=79",
    "Safari >=14",
    "iOS >=14"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "eslint": "^8.56.0",
    "react-scripts": "^5.0.1"
  }
}

File: App.tsx

import React from 'react';
import { IonApp, IonRouterOutlet } from '@ionic/react';

import Login from './pages/Login';

import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';

/* Theme variables */
import './theme/variables.css';

/* Internationalization Support */
import { IntlProvider } from 'react-intl';
import { IonReactRouter } from '@ionic/react-router';

export default class App extends React.PureComponent<{},{}> {

  render (){
    return (
    <IntlProvider locale="de-CH">
        <IonApp>
          <IonReactRouter>
            <IonRouterOutlet>
              <Route exact path="/login" component={ Login } />
            </IonRouterOutlet>
          </IonReactRouter>
        </IonApp>
      </IntlProvider>
    );
  }
}
Screenshot 2024-03-01 at 13 31 28

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 7.7.3

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v20.11.1 (/usr/local/Cellar/node@20/20.11.1/bin/node)
   npm    : 10.2.4
   OS     : macOS Unknown

Additional Information

No response

ionitron-bot[bot] commented 7 months ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

DunhamGitHub commented 7 months ago

I was able to reproduce the error from a new vanilla project.

*Project is attached as .zip for convenience / Find below step by step instructions to reproduce

  1. Install homebrew in MacOS (https://brew.sh/)
  2. brew install node@20 (LTS)
  3. Follow this guide to create a primitive sample project: https://ionicframework.com/docs/react/quickstart
  4. (Open Project in Visual Code)
  5. Copy/Paste belows package.json
{
  "name": "ionprojectsample",
  "version": "1.8.0",
  "description": "An Ionic project",
  "private": true,
  "_checkLatestVersionHere": "https://www.npmjs.com/package/@types/node",
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.22",
    "@capacitor/android": "^5.7.0",
    "@capacitor/app": "^5.0.7",
    "@capacitor/cli": "^5.7.0",
    "@capacitor/core": "^5.7.0",
    "@capacitor/haptics": "^5.0.7",
    "@capacitor/ios": "^5.7.0",
    "@capacitor/keyboard": "^5.0.8",
    "@capacitor/status-bar": "^5.0.7",
    "@ionic/core": "^7.7.3",
    "@ionic/react": "^7.7.3",
    "@ionic/react-router": "^7.7.3",
    "@types/jest": "29.5.12",
    "@types/node": "20.11.20",
    "@types/react": "^18.2.57",
    "@types/react-dom": "^18.2.19",
    "@types/react-router": "^5.1.16",
    "@types/react-router-dom": "^4.3.5",
    "canvas": "^2.11.2",
    "ionicons": "^7.2.2",
    "jsdom": "^24.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intl": "^6.2.2",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "typescript": "4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    "Chrome >=79",
    "ChromeAndroid >=79",
    "Firefox >=70",
    "Edge >=79",
    "Safari >=14",
    "iOS >=14"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "eslint": "^8.56.0",
    "react-scripts": "^5.0.1"
  }
}
  1. Run npm install (inside myApp)
  2. Open App.tsx (inside Visual Studio Code)

-> IonReactRouter is red-underlined / throws error

ionprojectsample.zip

mapsandapps commented 7 months ago

Hi, it looks like you haven't updated the @types/react-router-dom package. If you update this, the error should go away.

E.g.

    "@ionic/react": "^7.7.3",
    "@ionic/react-router": "^7.7.3",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "react-router": "^5.3.4",
    "react-router-dom": "^5.3.4"
ionitron-bot[bot] commented 6 months ago

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.