stackoom
  简体   繁体   中英

Craco unable to build react app when Deployed in Heroku

 原文  2021-10-01 16:24:00  2   2    reactjs/ express/ heroku/ deployment/ tailwind-css

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?

2 answers

solution1
 0  2021-11-16 01:26:26

您是否尝试将“tailwindcss”模块移动到依赖项而不是开发依赖项？

solution2
 0  2022-01-01 15:39:39

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question React App Crashes When Deployed to Heroku Images not loading in React app when deployed on Heroku Flask + React App Fails When Deployed to Heroku Heroku - Express and React app showing blank screen when deployed texpress-session not setting cookie in react app when deployed to heroku React app does not display anything when deployed to heroku React app working locally but application error when deployed to heroku React app deployed smoothly on Heroku but the app is not running React app deployed to heroku successfully but state is not updating Unable to login with Google OAuth when deployed to Heroku
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM