error: Cannot find module 'postcss' heroku - node.js

Question

The website works fine on local, but it fails to deploy on Heroku with a very common error. I am using direct deploy from Github.
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'postcss'
Require stack:
- /tmp/build_d7cb8562/node_modules/postcss-cli/index.js
- /tmp/build_d7cb8562/node_modules/postcss-cli/bin/postcss
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/tmp/build_d7cb8562/node_modules/postcss-cli/index.js:14:17)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/tmp/build_d7cb8562/node_modules/postcss-cli/index.js',
'/tmp/build_d7cb8562/node_modules/postcss-cli/bin/postcss'
]
}
ERROR: "prefix:css" exited with 1.
-----> Build failed
This is my package.json file before I tried fixing it by moving devDependencies to dependencies
{
"name": "dopefolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile:scss": "node-sass sass/main.scss css/style.css -w",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
"compress:css": "node-sass css/style.css css/style.css --output-style compressed",
"build": "npm-run-all prefix:css compress:css"
},
"author": "",
"license": "GPL-3.0",
"devDependencies": {
"autoprefixer": "^10.3.1",
"node-sass": "^6.0.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^8.3.1"
}
}
This is my attempted fix:
{
"name": "dopefolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"autoprefixer": "^10.3.1",
"node-sass": "^6.0.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^8.3.1"
},
"scripts": {
"compile:scss": "node-sass sass/main.scss css/style.css -w",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
"compress:css": "node-sass css/style.css css/style.css --output-style compressed",
"build": "npm-run-all prefix:css compress:css"
},
"author": "",
"license": "GPL-3.0",
"devDependencies": {
}
}
It still fails to deploy with the same error. What could be the case?