Multiple vulnerabilities in new CRA app , but the suggested "npm fix" is questionable - create-react-app

Question

I ran npx create-react-app project-a for my project and right away i found 27 vulnerabilities (16 moderate, 9 high, 2 critical) in my console.
As new developer this looks very scary, so i ran npm audit fix and noticed that many of them are related to Regular Expression stuff in browserslist , the npm audit fix didnt do anything, i still have 27 vulnerabilities.
After a bit of googling i found this closed github issue where the solution is apparently to move react-scripts to devDependencies ( that didnt remove the warnings ).
These warnings are false positives. There are no actual vulnerabilities affecting your app here.
To remove npm audit warnings, move react-scripts from dependencies to devDependencies in your package.json.
I found another github issue and someone said to add this to my package.json to change the version of the sub-dependency because react-dev-utils package uses a vulnerable version (7.0.9) of immer as a dependency ( it didnt fix it ).
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
}
At the very end of the audit it was suggested to run npm audit fix --force and that it includes breaking changes ! very-scary.
The breaking changes were this pretty much :
PS G:\Workspaces\React\project-a> npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating react-scripts to 0.9.5,which is a SemVer major change.
Big jump right there from version 4.0.3 down to 0.9.5 and of course it resulted in 43 vulnerabilities , and it suggested running npm audit fix --force yet again to go back to 4.0.3, so i did :
npm WARN audit Updating react-scripts to 4.0.3,which is a SemVer major change.
It's an infinite loop , going back and fourth between react-scripts 0.9.5 and 4.0.3 .
My Node version is : 16.13.1
My NPM version is : 8.1.2
I dont have CRA installed globally.
My Package.json :
{
"name": "project-a",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/css": "^11.5.0",
"#emotion/react": "^11.7.0",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.2.1",
"#mui/material": "^5.1.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"styled-components": "^5.3.3"
},
"devDependencies": {
"react-scripts": "^4.0.3"
},
"resolutions": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
"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"
]
}
}

Answer 1

You can use npm >8.3.0 with the overrides feature.
Just add to package.json:
...
"overrides": {
"immer": "9.0.7",
"ansi-html": "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"ansi-regex": "5.0.1",
"nth-check": "2.0.1",
"glob-parent": "6.0.1",
"browserslist": "4.18.1"
},
...