如何修复React项目中‘Module not found: Can't resolve 'p-queue'’错误？

环境信息 #

• Node.js版本：v18.16.1
• React项目使用react-scripts v4.0.0

错误信息 #

./node_modules/@uppy/provider-views/lib/ProviderView/ProviderView.js
Module not found: Can't resolve 'p-queue' in 'D:\WORK (D)\Works\testing\testing\node_modules@uppy\provider-views\lib\ProviderView'

项目package.json配置 #

{  
  "name": "sample",  
  "author": "sample",  
  "licence": "MIT",  
  "version": "1.0.0",  
  "private": false,  
  "scripts": {    
    "start": "react-scripts --openssl-legacy-provider start",    
    "start-normal": "react-scripts start",    
    "build": "react-scripts build",    
    "test": "react-scripts test",    
    "eject": "react-scripts eject",    
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""  
  },  
  "eslintConfig": {    
    "extends": "react-app"  
  },  
  "browserslist": [    
    ">0.2%",    
    "not dead",    
    "not op_mini all"  
  ],  
  "dependencies": {    
    "@ag-grid-community/client-side-row-model": "^26.2.0",    
    "@ag-grid-community/react": "^26.2.0",    
    "@devexpress/dx-react-core": "^2.7.6",    
    "@devexpress/dx-react-grid": "^2.7.6",    
    "@devexpress/dx-react-grid-bootstrap4": "^2.7.6",    
    "@devexpress/dx-react-scheduler": "^2.7.6",    
    "@devexpress/dx-react-scheduler-material-ui": "^2.7.6",    
    "@emotion/react": "^11.10.0",    
    "@emotion/styled": "^11.10.0",    
    "@material-ui/core": "^4.12.4",    
    "@material-ui/icons": "^4.11.3",    
    "@material-ui/styles": "^4.11.5",    
    "@mui/icons-material": "^5.10.2",    
    "@mui/lab": "^5.0.0-alpha.96",    
    "@mui/material": "^5.10.2",    
    "@mui/styles": "^5.10.2",    
    "@mui/system": "^5.11.16",    
    "@mui/x-data-grid": "latest",    
    "@mui/x-date-pickers": "^5.0.4",    
    "@uppy/core": "^3.3.0",    
    "@uppy/dashboard": "^3.4.1",    
    "@uppy/drag-drop": "^3.0.2",    
    "@uppy/file-input": "^3.0.2",    
    "@uppy/progress-bar": "^3.0.2",    
    "@uppy/react": "^3.1.2",    
    "add": "^2.0.6",    
    "ag-grid-community": "^26.2.0",    
    "aws-amplify": "^4.3.13",    
    "axios": "^0.21.1",    
    "caniuse-lite": "^1.0.30001393",    
    "chart.js": "^2.9.4",    
    "clsx": "^1.1.1",    
    "date-fns": "^2.23.0",    
    "dayjs": "^1.11.5",    
    "devextreme": "21.2",    
    "devextreme-react": "21.2",    
    "formik": "^2.1.5",    
    "history": "^5.0.0",    
    "html-react-parser": "^3.0.4",    
    "install": "^0.13.0",    
    "lodash": "^4.17.19",    
    "medium-editor": "^5.23.3",    
    "moment": "^2.29.1",    
    "mui-datatables": "^4.2.2",    
    "npm": "^7.7.4",    
    "nprogress": "^0.2.0",    
    "prop-types": "^15.7.2",    
    "react": "^17.0.2",    
    "react-avatar-edit": "^1.0.0",    
    "react-chartjs-2": "^2.10.0",    
    "react-color": "^2.19.3",    
    "react-dom": "^17.0.2",    
    "react-feather": "^2.0.8",    
    "react-helmet": "^6.1.0",    
    "react-mentions": "^4.4.7",    
    "react-perfect-scrollbar": "^1.5.8",    
    "react-quill": "^2.0.0",    
    "react-redux": "^7.2.4",    
    "react-responsive": "^9.0.0-beta.5",    
    "react-router": "^6.0.0-beta.0",    
    "react-router-dom": "^6.0.0-beta.0",    
    "react-scripts": "^4.0.0",    
    "react-select": "^4.3.1",    
    "react-social-login-buttons": "^3.6.1",    
    "react-swipeable-views": "^0.14.0",    
    "redux": "^4.1.1",    
    "redux-persist": "^6.0.0",    
    "redux-saga": "^1.1.3",    
    "styled-components": "^5.3.0",    
    "sweetalert2": "^11.4.0",    
    "uuid": "^8.3.0",    
    "yup": "^1.2.0"  
  },  
  "devDependencies": {    
    "@babel/plugin-proposal-private-property-in-object": "7.21.0",    
    "eslint-config-airbnb": "^18.2.1",    
    "prettier": "2.8.7",    
    "react-error-overlay": "6.0.9",    
    "redux-devtools-extension": "^2.13.9"  
  },  
  "resolutions": {    
    "react-error-overlay": "6.0.9"  
  }
}

已尝试的无效操作 #

• npm cache clean -force
• 删除package-lock.json
• 删除node_modules目录
• npm i --save --legacy-peer-deps

解决方案 #

1. 手动安装缺失的依赖p-queue #

p-queue是@uppy/provider-views的直接依赖，可能因版本兼容或npm安装逻辑问题未自动安装，直接手动添加：

npm install p-queue --save

2. 统一Uppy包版本（可选） #

当前项目中Uppy相关包版本不一致（@uppy/core v3.3.0、@uppy/dashboard v3.4.1等），版本差异可能引发依赖解析异常，建议将所有Uppy包统一到同一稳定版本：

1. 修改package.json中所有@uppy/*依赖的版本号为相同值，例如统一为^3.4.1
2. 重新执行安装：

rm -rf node_modules package-lock.json
npm install --legacy-peer-deps

3. 移除冗余的npm依赖 #

项目dependencies中包含"npm": "^7.7.4"，但当前使用的Node.js v18.16.1自带npm v9.5.1，版本冲突可能导致依赖安装异常，建议移除该冗余依赖：

1. 删除package.json中dependencies里的"npm": "^7.7.4"
2. 重新执行安装操作

内容的提问来源于stack exchange，提问作者Sathya Molagoda