使用create-react-app创建React应用报E404错误如何解决

问题表现 #

• 前期使用create-react-app创建React项目运行正常，在本地目录两次安装Hardhat后，每次执行创建项目操作终端都会抛出错误
• 错误核心为npm拉取@types/eslint@8.4.4版本包时返回404，提示该版本不存在于npm registry，完整错误日志：

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz - Not found
npm ERR! 404
npm ERR! 404  '@types/eslint@https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz' is not in this registry.        
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\sweta\AppData\Local\npm-cache\_logs\2022-06-30T19_09_57_337Z-debug-0.log

• 执行npm install -g create-react-app全局重装脚手架时，终端提示存在2个高危漏洞，无法定位故障点。

排查解决步骤 #

1. 先清理本地npm脏缓存，避免安装时读取到本地缓存的错误版本映射：

   npm cache clean --force
   

2. 不要在之前安装Hardhat的目录下直接创建React项目，新建一个完全空的文件夹作为React项目目录，进入该目录后再执行后续操作。同时检查当前用户根目录、项目上级目录有没有残留的异常锁文件（package-lock.json/yarn.lock）、错误的.npmrc配置，这类文件会被npm递归读取，很容易把Hardhat安装时的依赖版本规则带到React项目的安装流程里。
3. 卸载全局安装的旧版本create-react-app，终端出现的--global废弃警告是npm高版本的正常提示，不影响命令执行：

   npm uninstall -g create-react-app
   

   不要重新全局安装create-react-app。全局安装的旧版本脚手架会把依赖版本写死，这次报错的核心原因就是旧版脚手架锁定的@types/eslint@8.4.4版本已经被npm官方源移除，才会持续报404错误。
4. 直接通过npx调用最新稳定版脚手架创建项目，npx会自动拉取当前最新的正式版本，不会依赖本地全局安装的旧包：

   npx create-react-app 你的项目名称
   

关于高危漏洞提示的说明 #

安装依赖时出现的高危漏洞提示基本都是传递依赖的版本问题，刚创建完项目不需要专门处理。只要项目能正常启动、本地开发功能正常，这类提示不会影响日常开发，等后续官方更新依赖版本后重新执行npm install即可。不要随意执行npm audit fix --force强制修复，这类操作很容易打乱依赖版本对应关系，直接导致项目无法启动。

如果上述步骤执行完依旧报相同404错误，先执行npm config get registry检查当前npm源配置，若使用了第三方镜像源，先切回官方源重试即可：

npm config set registry https://registry.npmjs.org/

内容的提问来源于stack exchange，提问作者swetank singh