React项目npm install报E404 找不到login-history-api-fallback包

问题现象 #

开发React JS项目执行npm install安装依赖时抛出如下404报错：

code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/login-history-api-fallback - Not found
npm ERR! 404 
npm ERR! 404  'login-history-api-fallback@1.6.0' 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!     /Users/muhammadtariq/.npm/_logs/2022-06-16T11_48_11_271Z-debug-0.log

排查发现项目package.json的dependencies字段中并未声明login-history-api-fallback依赖，单独安装axios等单个包时仍触发相同报错，修改npm registry配置后问题未解决。对应dependencies配置如下：

"dependencies": {
    "@babel/core": "7.12.3",
    "@blocto/blocto-connector": "^0.2.3",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@ethersproject/providers": "^5.6.6",
    "@material-ui/styles": "^4.11.4",
    "@mui/material": "^5.2.6",
    "@mui/styled-engine-sc": "^5.1.0",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
    "@svgr/webpack": "5.5.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "@web3-react/core": "^6.1.9",
    "@web3-react/injected-connector": "^6.0.7",
    "@web3-react/walletconnect-connector": "^6.2.13",
    "@webcomponents/custom-elements": "^1.5.0",
    "axios": "^0.27.2",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "bfj": "^7.0.2",
    "camelcase": "^6.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "4.3.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^7.11.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.5.2",
    "file-loader": "6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "4.5.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "26.6.0",
    "jest-circus": "26.6.0",
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
    "jss": "^10.9.0",
    "mini-css-extract-plugin": "0.11.3",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.2.1",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "5.0.2",
    "prompts": "2.4.0",
    "react": "^17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.3",
    "react-dom": "^17.0.2",
    "react-redux": "^8.0.1",
    "react-refresh": "^0.8.3",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "resolve": "1.18.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^10.0.5",
    "semver": "7.3.2",
    "style-loader": "1.3.0",
    "styled-components": "^5.3.3",
    "terser-webpack-plugin": "4.2.3",
    "to-string-loader": "^1.2.0",
    "ts-pnp": "1.2.0",
    "url-loader": "4.1.1",
    "web-vitals": "^1.0.1",
    "web3": "^1.7.3",
    "webpack": "4.44.2",
    "webpack-dev-server": "3.11.1",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "5.1.4"
  },

根因说明 #

报错里提到的login-history-api-fallback根本不是npm上存在的包，是拼写错误的结果——React项目里webpack-dev-server依赖的路由History模式回退包实际叫connect-history-api-fallback，属于二级依赖，本来就不需要在项目package.json里手动声明。
出现这个问题的核心原因是npm本地缓存、配置文件或者锁文件被污染，依赖解析环节自动把正确的包名替换成了错的，所以哪怕单独装axios这类和它没关系的包，也会触发这个404，单纯换npm源自然解决不了问题。

解决步骤 #

按顺序执行以下操作即可修复：

• 强制清理npm本地损坏缓存，执行命令：npm cache clean --force
• 检查两个位置的.npmrc配置文件：一个是用户根目录下的~/.npmrc，一个是项目根目录下的.npmrc，删除文件里所有异常的包映射、别名配置，不要保留手动写的错误包替换规则
• 删除项目目录下的node_modules文件夹和package-lock.json锁文件，Mac/Linux系统可直接执行：rm -rf node_modules package-lock.json，Windows系统手动选中对应文件删除即可
• 检查全局npm环境是否残留错误包，执行：npm ls -g login-history-api-fallback，如果查到全局安装了这个不存在的包，执行npm uninstall -g login-history-api-fallback卸载
• 如果以上步骤操作完还是报错，直接重置npm默认配置，依次执行：npm config delete registry、npm config reset，清除之前手动修改的所有npm配置
• 所有操作完成后重新执行npm install即可正常安装依赖

内容的提问来源于stack exchange，提问作者Tariq Brohi