react-rte dependency issue with react@18.2.0

[sagarnagadiya]

Hi All,

I am getting the dependency error while running npm install from the ADO build pipeline.
I tried --force but still the same problem.
After adding react-rte packge, ADO pipeline is failing but I am not getting this error when I run the same in my local VS code.
Any help will be greatly appreciated.
Thanks,

Error from ADO pipeline:

; node version = v18.15.0
..
; npm version = 9.5.0
...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-rte@0.16.5
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR!   node_modules/@testing-library/react
npm ERR!     @testing-library/react@"^13.4.0" from the root project
npm ERR!   5 more (draft-js, react-dom, react-router, react-router-dom, react-scripts)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"0.14.x || 15.x.x || 16.x.x || 17.x.x" from react-rte@0.16.5
npm ERR! node_modules/react-rte
npm ERR!   react-rte@"^0.16.5" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"0.14.x || 15.x.x || 16.x.x || 17.x.x" from react-rte@0.16.5
npm ERR!   node_modules/react-rte
npm ERR!     react-rte@"^0.16.5" 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.

package.json

{
  "name": "mywebsite",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.0-alpha2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.10.0",
    "react-rte": "^0.16.5",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.57.0",
    "@typescript-eslint/parser": "^5.57.0",
    "eslint": "^8.37.0",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.7"
  }
}

[iamibrahimriaz]

There is a fix in #456 . Take a look here.

[Rajwinder-singh]

This issue is still there. I guess fix is not merged yet.

[aroy314]

In the meantime, you can bypass the error if you add this in your package.json :

"overrides": {
    "react-rte": {
      "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0 || ^18.0.0",
      "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0 || ^17.0.0 || ^18.0.0"
    }
  },`