Error resolving node dependency with example package - node.js

Question

I'm currently using Node v16.14.0 and npm v8.3.1 on my local machine. We've been pushing commits to azure devops which runs a ci/cd pipeline with a step that does npm install and npm run build:x. Never had any problems until recently. The yml file for the azure pipeline specifies 16.x for Node:
steps:
- task: NodeTool#0
inputs:
versionSpec: "16.x"
displayName: "Install Node.js
- script: |
npm install
npm run build:ourenv
displayName: "npm install and build"
The other day I pushed a few lines of code and I noticed the task installed Node 16.15.0. But it built and deployed normally. Then the next day I made a change and noticed it installed Node 16.15.1. This broke the build that ran fine on my local machine.
The fix to get the build working in the pipeline was to change the node version to 16.15.0 (the last successful build). But I'd like to get it to work with 16.x again.
The output of the pipeline build shows a problem resolving at least one dependency (package.json hasn't changed). Here's the output:
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: #typescript-eslint/eslint-plugin#5.16.0
npm WARN Found: #typescript-eslint/parser#4.31.0
npm WARN node_modules/#typescript-eslint/parser
npm WARN #typescript-eslint/parser#"^4.31.0" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer #typescript-eslint/parser#"^5.0.0" from #typescript-eslint/eslint-plugin#5.16.0
npm WARN node_modules/#typescript-eslint/eslint-plugin
npm WARN #typescript-eslint/eslint-plugin#"^5.5.0" from eslint-config-react-app#7.0.0
npm WARN node_modules/eslint-config-react-app
npm WARN 1 more (eslint-plugin-jest)
npm WARN
npm WARN Conflicting peer dependency: #typescript-eslint/parser#5.27.1
npm WARN node_modules/#typescript-eslint/parser
npm WARN peer #typescript-eslint/parser#"^5.0.0" from #typescript-eslint/eslint-plugin#5.16.0
npm WARN node_modules/#typescript-eslint/eslint-plugin
npm WARN #typescript-eslint/eslint-plugin#"^5.5.0" from eslint-config-react-app#7.0.0
npm WARN node_modules/eslint-config-react-app
npm WARN 1 more (eslint-plugin-jest)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #typescript-eslint/parser#4.31.0
npm ERR! Found: eslint#8.11.0
npm ERR! node_modules/eslint
npm ERR! peer eslint#"^7.5.0 || ^8.0.0" from #babel/eslint-parser#7.17.0
npm ERR! node_modules/#babel/eslint-parser
npm ERR! #babel/eslint-parser#"^7.16.3" from eslint-config-react-app#7.0.0
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app#"^7.0.0" from react-scripts#5.0.0
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"^5.0.0" from the root project
npm ERR! peer eslint#"^6.0.0 || ^7.0.0 || ^8.0.0" from #typescript-eslint/eslint-plugin#5.16.0
npm ERR! node_modules/#typescript-eslint/eslint-plugin
npm ERR! #typescript-eslint/eslint-plugin#"^5.5.0" from eslint-config-react-app#7.0.0
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app#"^7.0.0" from react-scripts#5.0.0
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"^5.0.0" from the root project
npm ERR! peerOptional #typescript-eslint/eslint-plugin#"^4.0.0 || ^5.0.0" from eslint-plugin-jest#25.7.0
npm ERR! node_modules/eslint-plugin-jest
npm ERR! eslint-plugin-jest#"^25.3.0" from eslint-config-react-app#7.0.0
npm ERR! node_modules/eslint-config-react-app
npm ERR! eslint-config-react-app#"^7.0.0" from react-scripts#5.0.0
npm ERR! node_modules/react-scripts
npm ERR! 16 more (#typescript-eslint/experimental-utils, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint#"^5.0.0 || ^6.0.0 || ^7.0.0" from #typescript-eslint/parser#4.31.0
npm ERR! node_modules/#typescript-eslint/parser
npm ERR! #typescript-eslint/parser#"^4.31.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: eslint#7.32.0
npm ERR! node_modules/eslint
npm ERR! peer eslint#"^5.0.0 || ^6.0.0 || ^7.0.0" from #typescript-eslint/parser#4.31.0
npm ERR! node_modules/#typescript-eslint/parser
npm ERR! #typescript-eslint/parser#"^4.31.0" 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.
And my package.json looks like this:
{
"name": "myapp",
"version": "1.0.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.6.0",
"#emotion/styled": "^11.6.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#mui/icons-material": "^5.2.4",
"#mui/lab": "^5.0.0-alpha.60",
"#mui/material": "^5.5.2",
"#mui/styled-engine-sc": "^5.5.2",
"#mui/styles": "^5.5.1",
"#mui/types": "^7.1.0",
"#mui/x-data-grid": "^5.7.0",
"#mui/x-date-pickers": "^5.0.0-alpha.2",
"#popperjs/core": "^2.10.1",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#testing-library/user-event": "^13.2.1",
"#types/history": "^4.7.9",
"#types/jest": "^27.0.1",
"#types/node": "^16.9.1",
"#types/react": "^17.0.20",
"#types/react-big-calendar": "^0.36.4",
"#types/react-dates": "^21.8.3",
"#types/react-dom": "^17.0.9",
"#types/react-router-dom": "^5.1.8",
"#types/reactstrap": "^8.7.1",
"#types/validator": "^13.7.1",
"#typescript-eslint/parser": "^4.31.0",
"array-move": "^4.0.0",
"axios": "^0.21.4",
"bootstrap": "^5.1.1",
"connected-react-router": "6.9.1",
"css-loader": "^6.2.0",
"date-fns": "^2.28.0",
"env-cmd": "^10.1.0",
"eslint-plugin-flowtype": "^5.9.2",
"eslint-plugin-import": "2.24.0",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.24.0",
"history": "5.0.1",
"jquery": "^3.6.0",
"jshint": "^2.13.4",
"merge": "^2.1.1",
"moment": "^2.29.1",
"msal": "^1.4.12",
"oidc-react": "^1.5.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-big-calendar": "^0.39.4",
"react-dates": "^21.8.0",
"react-dom": "^17.0.2",
"react-draggable": "^4.4.4",
"react-localization": "^1.0.17",
"react-popper": "^2.2.5",
"react-query": "^3.23.2",
"react-quill": "^1.3.5",
"react-router": "^5.2.1",
"react-router-dom": "^6.0.2",
"react-scripts": "^5.0.0",
"react-sortable-hoc": "^2.0.0",
"reactstrap": "^8.10.0",
"styled-components": "^5.3.5",
"svgo": "^2.6.0",
"typescript": "^4.4.3",
"uuid": "^8.3.2",
"validator": "^13.7.0"
},
"scripts": {
"start:development": "env-cmd -f .env.development react-scripts start",
"start:staging": "env-cmd -f .env.staging react-scripts start",
"start:prod": "env-cmd -f .env.production react-scripts start",
"build:development": "env-cmd -f .env.development react-scripts build",
"build:staging": "env-cmd -f .env.staging react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/uuid": "^8.3.4"
}
}
My package.json has a dep for #typescript-eslint/parser # v4.31.0. I ran npm list #typescript-eslint/parser and the output is:
myapp#0.1.0 D:\dev\repos\myapp
├── #typescript-eslint/parser#4.31.0
└─┬ react-scripts#5.0.0
└─┬ eslint-config-react-app#7.0.0
├─┬ #typescript-eslint/eslint-plugin#5.16.0
│ └── #typescript-eslint/parser#4.31.0 deduped invalid: "^5.0.0" from node_modules/#typescript-eslint/eslint-plugin
└── #typescript-eslint/parser#5.16.0
It appears to me that a dep of one of my dep requires a version of #typescript-eslint/parser that isn't compatible with the version in my project. Is that correct? And if so, what do I do to fix it (what does fixing the conflict upstream mean here)? And does the solution involve only upgrading this package, or upgrading/downgrading node too? Why is this apparent incompatibility only an issue in 16.15.1 and not in 16.15.0?
For someone with more experience, can you tell by looking at my package.json file what's wrong?
Thanks for any input.