Craco unable to build react app when Deployed in Heroku - reactjs

Question

Been at it for two days and stumped.. tried every solution I can find on stackoverflow.
Trying to deploy my MERN stack app with tailwind on Heroku. It seems Craco/tailwind is giving me problem.
Any help please?
"(node:2326) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss'
Require stack:
/tmp/build_1f05e363/frontend/craco.config.js
/tmp/build_1f05e363/frontend/node_modules/#craco/craco/lib/config.js
/tmp/build_1f05e363/frontend/node_modules/#craco/craco/scripts/build.js
"
Error build log posted below
`
-----> Building on the Heroku-20 stack
-----> Using buildpack: mars/create-react-app
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 14.17.5
engines.npm (package.json): unspecified (use default)
Resolving node version 14.17.5...
Downloading and installing node 14.17.5...
Using default npm version: 6.14.14
-----> Restoring cache
Cached directories were not restored due to a change in version of node, npm, yarn or stack
Module installation may take longer for this build
-----> Installing dependencies
Installing node modules
> nodemon#2.0.12 postinstall /tmp/build_1f05e363/node_modules/nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
added 269 packages in 8.641s
-----> Build
Running heroku-postbuild
> react-ecommerce#1.0.0 heroku-postbuild /tmp/build_1f05e363
> NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend
> core-js#2.6.12 postinstall /tmp/build_1f05e363/frontend/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js#3.16.3 postinstall /tmp/build_1f05e363/frontend/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
> core-js-pure#3.16.3 postinstall /tmp/build_1f05e363/frontend/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
> ejs#2.7.4 postinstall /tmp/build_1f05e363/frontend/node_modules/ejs
> node ./postinstall.js
added 1991 packages from 811 contributors in 51.631s
150 packages are looking for funding
run `npm fund` for details
> frontend#0.1.0 build /tmp/build_1f05e363/frontend
> craco build
`
(node:2326) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss'
Require stack:
- /tmp/build_1f05e363/frontend/craco.config.js
- /tmp/build_1f05e363/frontend/node_modules/#craco/craco/lib/config.js
- /tmp/build_1f05e363/frontend/node_modules/#craco/craco/scripts/build.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/tmp/build_1f05e363/frontend/craco.config.js:6:11)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:2326) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:2326) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
`
-----> Caching build
- node_modules
-----> Pruning devDependencies
audited 269 packages in 2.577s
22 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
=====> Detected Framework: React.js (create-react-app)
Writing `static.json` to support create-react-app
Enabling runtime environment variables
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git
=====> Detected Framework: Static HTML
-----> Installed nginx 1.19.0 to /app/bin
Using release configuration from last framework (Static HTML).
-----> Discovering process types
Procfile declares types -> web
-----> Compressing...
Done: 103.2M
-----> Launching...
Released v20
`
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.2.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"react": "^17.0.2",
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-paypal-button-v2": "^2.6.3",
"react-redux": "^7.2.5",
"react-router-dom": "^5.2.1",
"react-scripts": "4.0.3",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.7",
"postcss": "^7.0.38",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.16"
}
}
I've tried uninstalling tailwind/postcss/autoprefixer and re-installing it to dependencies and in that case, the build will still not complete with a Craco build error.
I'm stumped been trying to fix this for 8 hours..
If I bash into my heroku app:
` Running bash on ⬢ appName123... up, run.4756 (Free)
~ $ dir
Procfile README.md backend frontend node_modules package-lock.json package.json
~ $ cd backend
~/backend $ dir
config controller data middleware models routes seeder.js server.js utils
~/backend $ cd ..
~ $ cd frontend
~/frontend $ dir
craco.config.js node_modules package-lock.json package.json public src tailwind.config.js
~/frontend $ exit
exit
`
No build folder.
I try to install manually:
`~/frontend $ npm run build
> frontend#0.1.0 build /app/frontend
> craco build
(node:81) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss'
Require stack:
- /app/frontend/craco.config.js
- /app/frontend/node_modules/#craco/craco/lib/config.js
- /app/frontend/node_modules/#craco/craco/scripts/build.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
at Function.Module._load (internal/modules/cjs/loader.js:745:27)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/app/frontend/craco.config.js:6:11)
at Module._compile (internal/modules/cjs/loader.js:1072:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:81) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:81) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.`
Same error.. unable to build.
Tailwind however will work locally no matter if its a regular or dev dependency and craco build runs fine every time. It's just deployment in Heroku thats causing a problem.
I've specified Node version, updated my build pack to mars create-react-app.... nothing else left to try
package.json in root folder for backend server
{
"name": "react-ecommerce",
"engines": {
"node": "14.17.5"
},
"version": "1.0.0",
"description": "MERN ecommerce shop",
"main": "server.js",
"dependencies": {
"bcryptjs": "^2.4.3",
"concurrently": "^6.2.1",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-async-handler": "^1.1.4",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.0.4",
"nodemon": "^2.0.12"
},
"devDependencies": {},
"scripts": {
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"start": "node backend/server",
"dev": "concurrently \"npm run server \" \"npm run client \"",
"data:import": "node backend/seeder",
"data:delete": "node backend/seeder -d",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
}
}
Once again, everything works locally. Even when booting up in production mode without craco run. So path seems to be fine. It's the build in Heroku will fail
Any help?

Answer 1

Try moving the 'tailwindcss' module to the dependencies instead to the dev dependencies.

Answer 2

Yep, had the same issue on my VPS, resolved it by deleting them and installing again:
npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9