bug: Error from IonReactRouter when upgrading to v7

[DunhamGitHub]

bug: Error from IonReactRouter when upgrading to v7

[ionitron-bot]

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]

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"
  }
}

6. Run npm install (inside myApp)
7. Open App.tsx (inside Visual Studio Code)

-> IonReactRouter is red-underlined / throws error

ionprojectsample.zip

[mapsandapps]

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"