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

pancake
October 1, 2021
283 views
1 vote
2 Answers

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

       

       > [email protected] 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

       

       > [email protected] heroku-postbuild /tmp/build_1f05e363

       > NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend

       

       

       > [email protected] postinstall /tmp/build_1f05e363/frontend/node_modules/babel-runtime/node_modules/core-js

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > [email protected] postinstall /tmp/build_1f05e363/frontend/node_modules/core-js

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > [email protected] postinstall /tmp/build_1f05e363/frontend/node_modules/core-js-pure

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > [email protected] 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

       

       

       > [email protected] 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

> [email protected] 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?

Answers

- BrunoViera
- November 16, 2021 at 2:26 am
- 0 votes
0
Try moving the ‘tailwindcss’ module to the dependencies instead to the dev dependencies.

Login or Signup to reply.

- Svyatoslav
- January 1, 2022 at 4:39 pm
- 0 votes
0
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
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Craco unable to build react app when Deployed in Heroku – Nginx

Answers