I have an old project that I created using create-react-app. I have a conflicting peer dependency regarding eslint that I've pasted below, along with my package.json. Running npm install
isn't enough to fix it, so it seems I have to do it manually.
Could not resolve dependency:
peer @typescript-eslint/eslint-plugin@"2.x" from eslint-config-react-app@5.2.1
node_modules/eslint-config-react-app
dev eslint-config-react-app@"^5.2.1" from the root project
Conflicting peer dependency: eslint@6.8.0
node_modules/eslint
peer eslint@"^5.0.0 || ^6.0.0" from @typescript-eslint/eslint-plugin@2.34.0
node_modules/@typescript-eslint/eslint-plugin
peer @typescript-eslint/eslint-plugin@"2.x" from eslint-config-react-app@5.2.1
node_modules/eslint-config-react-app
dev eslint-config-react-app@"^5.2.1" from the root project
{
"name": "xxxxx",
"version": "x.x.x",
"private": true,
"dependencies": {
"@codewell/super-search": "^1.0.0",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.12.3",
"@material-ui/data-grid": "^4.0.0-alpha.37",
"@mui/icons-material": "^5.0.1",
"@mui/material": "^5.0.1",
"@mui/x-data-grid": "^4.0.0",
"ag-grid-community": "^26.0.0",
"ag-grid-enterprise": "^26.0.1",
"ag-grid-react": "^26.0.0",
"axios": "^0.25.0",
"bootstrap": "^5.1.1",
"date-fns": "^2.25.0",
"eslint-plugin": "^1.0.1",
"eslint-plugin-react-hooks": "^4.6.0",
"jquery": "^3.6.0",
"merge": "^2.1.1",
"oidc-client": "^1.9.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-rc.0",
"react-date-range": "^1.4.0",
"react-dom": "^17.0.2",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"reactstrap": "^8.4.1",
"rimraf": "^2.6.2",
"serve": "^14.2.0"
},
"devDependencies": {
"ajv": "^6.9.1",
"cross-env": "^5.2.0",
"eslint-config-react-app": "^5.2.1",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"nan": "^2.14.1",
"typescript": "^3.7.5"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And here are the details of the package that I'd like to update to its latest version
"node_modules/eslint-config-react-app": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz",
"integrity": "sha512-pGIZ8t0mFLcV+6ZirRgYK6RVqUIKRIi9MmgzUEmrIknsn3AdO0I32asO86dJgloHq+9ZPl8UIg8mYrvgP5u2wQ==",
"dev": true,
"dependencies": {
"confusing-browser-globals": "^1.0.9"
},
"peerDependencies": {
"@typescript-eslint/eslint-plugin": "2.x",
"@typescript-eslint/parser": "2.x",
"babel-eslint": "10.x",
"eslint": "6.x",
"eslint-plugin-flowtype": "3.x || 4.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-hooks": "1.x || 2.x"
}
},
My thought process is that if I can update eslint-config-react-app
, it'll no longer have dependent packages that don't work with the version of eslint I require. I've tried updating it to its latest version using --legacy-peer-deps
, but that only updates the package(s) that's in node_modules/react_scripts.
My project has a ClientApp directory where I am trying to update these packages, and it's also where the package.json is. Is there a way of updating the package that's in just the node_modules folder?
I fixed it by typing in the latest version of eslint-config-react-app
directly into my package.json, then deleting my node_modules folder and running npm install
. I didn't know you could type in the packages, would've saved me a lot of time!