reactjsnpmmodulenotfounderroruppy

How to fix "Module not found: Can't resolve 'p-queue' in 'node_modules\@uppy\provider-views\lib\ProviderView'"?

I'm currently using Node version of v18.16.1 and in my one of the recent projects I've been facing below issue.

./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'

This is a react project and you can find my package.json as below,

{
  "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"
  }
}

After doing some research I was able to find some commands to run which were suppose to fix this issue. but it didn't work as I expected. Here are those commands,

As I'm pretty much clueless about the issue and how to fix it. I'm expecting some expert guidance to fix this issue in my project.

Solution

  • Facing the same issue with Node v16.19.0. Tried the following but it didn't work for me either.

    EDIT 9/20

    I ended up editing the Pqueue import statement to the following in node_modules@uppy\provider-views\lib\ProviderView\ProviderView.js:

    import PQueue from 'p-queue/dist';

    and it worked