search

tailwindlabs / tailwindcss.com

The Tailwind CSS documentation website.
https://tailwindcss.com
3.29k stars 1.74k forks source link

Craco build fails on Heroku #772

Closed ujiriukiri closed 3 years ago

ujiriukiri commented 3 years ago

I created a new react app with npx create-react-app project-name I followed the insctuctions on devloping tailwindcss with react on (https://tailwindcss.com/docs/guides/create-react-app) The app works fine on my local machine but fails to build on heroku The error seems to be cause by craco

// package.json
{
  "name": "react-tailwind",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.7.3",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "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": {
    "@iconify-icons/ion": "^1.1.2",
    "@iconify-icons/twemoji": "^1.1.0",
    "@iconify-icons/typcn": "^1.1.0",
    "@iconify/icons-mdi": "^1.1.11",
    "@iconify/icons-simple-line-icons": "^1.1.0",
    "@iconify/react": "^1.1.4",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
  }
}

// craco.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Error on Hero deploy reads

Creating an optimized production build...
warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
.       
       Treating warnings as errors because process.env.CI = true.
       Most CI servers set it automatically.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-tailwind@0.1.0 build: `craco build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-tailwind@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.5BWCH/_logs/2021-03-03T20_36_47_837Z-debug.log
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       Some possible problems:

       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version

       Love,
       Heroku
frankstallone commented 3 years ago

This was closed but we're seeing the same issue on Heroku. What was your fix @ujiriukiri? This reads like a dependecy issue but works locally fine.


2021-04-14T04:45:57.275663+00:00 app[web.1]: > craco start
2021-04-14T04:45:57.275663+00:00 app[web.1]: 
2021-04-14T04:46:15.524051+00:00 app[web.1]: 
2021-04-14T04:46:15.524068+00:00 app[web.1]: up to date, audited 2000 packages in 18s
2021-04-14T04:46:15.539923+00:00 app[web.1]: 
2021-04-14T04:46:15.539925+00:00 app[web.1]: found 0 vulnerabilities
2021-04-14T04:46:16.066869+00:00 app[web.1]: node:internal/modules/cjs/loader:924
2021-04-14T04:46:16.066878+00:00 app[web.1]: const err = new Error(message);
2021-04-14T04:46:16.066879+00:00 app[web.1]: ^
2021-04-14T04:46:16.066880+00:00 app[web.1]: 
2021-04-14T04:46:16.066880+00:00 app[web.1]: Error: Cannot find module 'tailwindcss'
2021-04-14T04:46:16.066880+00:00 app[web.1]: Require stack:
2021-04-14T04:46:16.066881+00:00 app[web.1]: - /app/craco.config.js
2021-04-14T04:46:16.066882+00:00 app[web.1]: - /app/node_modules/@craco/craco/lib/config.js
2021-04-14T04:46:16.066882+00:00 app[web.1]: - /app/node_modules/@craco/craco/scripts/start.js
2021-04-14T04:46:16.066883+00:00 app[web.1]: at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)```
IuliaCovalenco commented 3 years ago

Hello guys @frankstallone, @ujiriukiri ! Having the same problem! Were you able to resolve it ? Thank you for your help

frankstallone commented 3 years ago

I solved this by moving to Netlify.

victorquanlam commented 3 years ago

I've got the same issue.

IuliaCovalenco commented 3 years ago

I was able to solve the issue by executing npm install. @victorquanlam This is my package.json. I had to remove my dev. dependencies and put its content into dependencies. And I would advise you to review if you have some orthographical errors.

{ "name": "pressclub", "version": "0.1.0", "private": true, "engines": { "node": "14.16.0", "npm": "6.14.11" }, "dependencies": { "@agney/react-loading": "^0.1.2", "@craco/craco": "^6.2.0", "@material-ui/core": "^4.12.3", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "autoprefixer": "^9.8.6", "axios": "^0.21.1", "postcss": "^7.0.36", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "styled-components": "^5.3.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "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" ] } }

DavidSalemLee commented 3 years ago

Is there any update to this? Heroku doesn't build...

IuliaCovalenco commented 3 years ago

Is there any update to this? Heroku doesn't build...

@DavidSalemLee can you please show your error

DavidSalemLee commented 3 years ago

@luliaCovalenco

`

-----> 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

Any help?

IuliaCovalenco commented 3 years ago

@DavidSalemLee looks like he is really unable to find the right modules. first of all, verify if you are in the right folder. In my case, I thought it was easier to completely separate my back end and front end. Then used GitHub to upload both of them to Heroku, with separate apps.

Second, remove your dev dependencies and put everything that you have there into dependencies, as I mentioned in my previous comment, delete the node modules folder and then run npm install. I don't see any node version and npm version specifications.

How to deploy node+react (same folder): https://www.youtube.com/watch?v=5dQC2JUd27g&list=PLOFMKcEMn60wZMtntKsdmvWaxeRQFjgjl&index=2

I have one more but it is in Brasilian : https://www.youtube.com/watch?v=-j7vLmBMsEU

Have my doubts about your proxy. See the tutorial, you will need to create a new file, config.js with your baseURL and adjust the rest of your code.

Be sure you have no errors in your code. I don't know if it will help you, but it resolved my problems. I hope you will be able to solve your build problem.

DavidSalemLee commented 3 years ago

@IuliaCovalenco

thank you i tried to move to dependencies and not devdependencies and it fails to build with a craco error

I’m following a tutorial as a guideline and the only difference in npm packages are tailwind and craco.

I might have to just remove tailwind if i can’t find a solution which would be a total bummer cause i love using it

IuliaCovalenco commented 3 years ago

@DavidSalemLee I would love to help you more, but I'm kinda new to it too, don't even know how I was able to solve the problem, but it's working perfectly just by correcting the package.json { "name": "projectname", "version": "0.1.0", "private": true, "engines": { "node": "14.16.0", "npm": "6.14.11" }, "dependencies": { "@agney/react-loading": "^0.1.2", "@craco/craco": "^6.2.0", "@material-ui/core": "^4.12.3", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "autoprefixer": "^9.8.6", "axios": "^0.21.1", "postcss": "^7.0.36", "react": "^17.0.2", "react-dom": "^17.0.2", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", "styled-components": "^5.3.0", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "web-vitals": "^1.1.2" },

Good luck David!

DavidSalemLee commented 3 years ago

@IuliaCovalenco thanks! I'll troubleshoot further

DavidSalemLee commented 3 years ago

I just want to update and say that it's been fixed. The reason why moving tailwind packages to dependencies didn't work for me was because I had another simultaneous error that was throwing me off. But after that error was fixed, moving tailwindcss postcss autoprefixer all to dependencies instead of dev dependencies caused the build to finish.

danny-faith commented 3 years ago

I had been struggling with this issue for hours too. Had the same setup, React, craco, tailwind, Heroku, postcss, moving tailwind and also in my case prettier and its plugins had to be moved into devDependencies in order for the Heroku build to succeed.