PatternFly don't work with React v18 using Vite v4

[lucianoaraus]

Hey! I'm using Vite v4 (4.3.2) for a React v18 (18.2.0) and Typescript project and when I try to install @patternfly/react-charts and @patternfly/react-core gives me this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project-name
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @patternfly/[email protected]
npm ERR! node_modules/@patternfly/react-charts
npm ERR!   @patternfly/react-charts@"6.34.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

These are my current dependencies:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.62.1",
    "@patternfly/react-charts": "6.34.1",
    "@patternfly/react-core": "4.181.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.57.1",
    "@typescript-eslint/parser": "^5.57.1",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }

[lucianoaraus]

The problem was in the styles of "@patternfly/react-core" dependency. "@patternfly/react-charts" works OK with React 18 and Vite. Nice job!