Strategy to update Node.js and npm - node.js

Question

We are currently using, npm - 9.1.3 and node - v16.14.2
What's a good strategy to update both the npm and node to the latest versions in the Windows environment?
Are there any issues involved?
My package.json looks like,
{
"name": "myreact",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "jest --verbose --colors",
"test:ci": "jest --ci --watchAll=false --colors --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura --coverageThreshold '{}'",
"test:coverage": "jest --verbose --coverage",
"test:watch": "jest --verbose --watch",
"test-debug": "node --inspect-brk --inspect ./node_modules/jest/bin/jest -i",
"start": "concurrently \"webpack-dev-server --mode development --open\" \"npm:stubby\"",
"start:iis": "webpack-dev-server --mode development --open --iis",
"build": "webpack --progress --mode production",
"build:dev": "webpack --progress --mode production --dev",
"build:prod": "lingui add-locale en && lingui extract --clean && lingui compile && webpack --mode production",
"lint": "eslint --cache --format codeframe --ext mjs,jsx,js src",
"add-locale": "lingui add-locale",
"extract": "lingui extract",
"compile": "lingui compile",
"stubby": "stubby --data stubs/stubby.yaml --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#craftjs/core": "0.2.0-beta.1",
"#craftjs/utils": "0.2.0-beta.1",
"#my/react-homegrown": "file:..//thirdparty/react/#my/my-react-homegrown-0.10.90.tgz",
"#lingui/core": "^2.9.1",
"#lingui/macro": "^2.9.1",
"#lingui/react": "^2.9.1",
"#material-ui/core": "^4.11.0",
"#material-ui/lab": "^4.0.0-alpha.56",
"#tinymce/tinymce-react": "^3.12.8",
"antlr4": "4.8.0",
"axios": "^0.26",
"classnames": "^2.3.1",
"date-fns": "^2.14.0",
"file-saver": "^2.0.5",
"formik": "^2.1.4",
"immer": "^9.0.12",
"json5": "^2.2.3",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"nanoid": "^3.1.32",
"prop-types": "^15.7.2",
"pubsub-js": "^1.9.2",
"qs": "^6.11.0",
"react": "^16.14.0",
"react-container-query": "^0.12.0",
"react-datepicker": "^2.16.0",
"react-dom": "^16.14.0",
"react-resize-detector": "^6.7.2",
"react-resize-panel": "^0.3.5",
"react-router-dom": "^5.2.0",
"react-to-print": "^2.14.7",
"react-virtualized-auto-sizer": "^1.0.5",
"react-window": "^1.8.6",
"recoil": "^0.7.0",
"resolve": "^1.22.1",
"sanitize-html": "2.7.1",
"sheetjs-style": "^0.15.8",
"tinymce": "^5.10.7",
"yup": "^0.32.11"
},
"peerDependencies": {
"react": "^16.14.0",
"react-dom": "^16.14.0"
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#babel/preset-react": "^7.14.5",
"#lingui/cli": "^2.9.2",
"#neutrinojs/airbnb": "^9.2.0",
"#neutrinojs/compile-loader": "^9.2.0",
"#neutrinojs/dev-server": "^9.4.0",
"#neutrinojs/eslint": "^9.2.0",
"#neutrinojs/jest": "^9.2.0",
"#neutrinojs/react": "^9.2.0",
"#tippyjs/react": "^4.0.5",
"#types/jest": "^25.2.3",
"assets-webpack-plugin": "^5.1.2",
"autoprefixer": "^9.8.4",
"babel-core": "^7.0.0-bridge.0",
"babel-plugin-macros": "^2.8.0",
"concurrently": "^5.3.0",
"core-js": "^2.6.11",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.5.0",
"eslint": "^6.8.0",
"eslint-plugin-react-hooks": "^4.0.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-junit": "12.1.0",
"moment-locales-webpack-plugin": "^1.2.0",
"neutrino": "^9.2.0",
"postcss-loader": "^3.0.0",
"rc-slider": "^8.7.1",
"react-overlays": "^1.2.0",
"react-scripts": "^4.0.3",
"sass": "^1.49.9",
"sass-loader": "^10.0.5",
"stubby": "^5.0.0",
"style-loader": "^1.2.1",
"styled-components": "^4.1.2",
"webpack": "^4.44.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.1"
}
}

Answer 1

Upgrading dependencies always comes with the risk of causing breakage to older dependencies. Typically, that occurs when you're using a really old module that requires one of your other modules to be on an older version as you go to upgrade it.
One really neat way to find outdated packages comes built-into NPM. Try running this in your both your backend and frontend projects:
npm outdated
It will return a list that's likely very large of outdated packages. Go through each package and try to find the ones with the largest disparity between the Current and Latest version. These packages will be the most difficult to upgrade. Also the packages that have a very small difference between current and latest means they are likely outdated. You'll want to check their Github repository to see when the last commit was and generally if it's being maintained anymore.
Upgrading past Node 16 is likely to cause breaking changes in your app on the backend. In terms of your front-end and the compiled client, it's not going to have much effect. Upgrading from React 16 to 18 has many breaking changes though. Migrating from Material-UI v4 to v5 has many breaking changes. Also moving from react-scripts 4 to 5 has quite a few changes.
In general, you'll want to go through all your packages and do some research based on the business needs. It's common for businesses to have to make the touch choice between keeping an older module pegged for awhile before upgrading it, as it may cause a required refactor.