Heroku ReactJS deployment - node.js

Question

I'm taking a ReactJS course, and I am on the final lesson, which is posting my app to Heroku. However, whenever I try to do this, I get these errors:
/tmp/build_64ba7376/node_modules/webpack-cli/bin/cli.js:93
throw err;
^
Error: Cannot find module 'uglifyjs-webpack-plugin'
...
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! react-project#1.0.0 build: `cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --color
...
To https://git.heroku.com/tvh-bottega-react-js-project.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/tvh-bottega-react-js-project.git'
And these are the app's dependencies:
"dependencies": {​​​​​​​​
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"ajv": "6.12.0",
"autoprefixer": "^9.1.0",
"axios": "^0.21.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.5",
"babel-plugin-async-to-promises": "^1.0.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^0.1.16",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"debug": "^2.6.9",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"eslint": "^4.2.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-react": "^7.1.0",
"express": "4.17.1",
"extract-loader": "^2.0.1",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-to-draftjs": "^1.5.0",
"html-webpack-plugin": "^3.2.0",
"moment": "^2.29.1",
"node-sass": "^4.13.1",
"postcss-loader": "^2.1.6",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-draft-wysiwyg": "^1.14.7",
"react-dropzone-component": "^3.2.0",
"react-html-parser": "^2.0.2",
"react-modal": "^3.14.3",
"react-redux": "7.2.0",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"react-truncate": "^2.4.0",
"redux": "4.0.5",
"sass-loader": "^7.1.0",
"striptags": "^3.2.0",
"style-loader": "^0.21.0",
"webpack": "4.42.1",
"webpack-cli": "3.3.11",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.10.3",
"webpack-hot-middleware": "2.25.0",
"webpack-merge": "4.2.2"
}​​​​​​​​,
"devDependencies": {​​​​​​​​
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"uglifyjs-webpack-plugin": "^1.3.0"
}​​​​​​​​
NPM (version 6.x I believe), NodeJS(I think the latest version), Axios, React Dropzone Component, Font Awesome, React Modal Library, DraftJS, React HTML Parser, Striptags, and Truncate packages installed. I've tried re-installing uglifyjs but still get the same error. I've tried to repair npm (as it has some errors), but every attempt ends in failure (it says something about Python in the stack trace).
I've followed along with Heroku's basic troubleshooting guides, but my builds always fail at this stage. What should I do to fix this?

Answer 1

Try to install "uglifyjs-webpack-plugin" not as devDependencies and try to deploy again.