CODEWITHSUNDEEP
herokuyarnpkgruby-on-rails-6webpackertailwind-css
David Lee
David Lee

Reputation: 601

Rails 6 and Tailwind CSS does not deploy to Heroku

I have a Rails 6 app that was successfully deployed to Heroku and worked on localhost:3000.

I added tailwindcss via yarn and webpack. It runs perfectly fine on localhost, but does not run on heroku. When I run heroku logs I get the following error

console error logs

I've read all the Heroku Rails 6 Webpacker issues, and tried all the suggestions. Nothing worked.

  1. I have commented out <%= stylesheet_pack_tag %> ... didn't help
  2. I have toggled extract_css: true in webpacker.yml file .... didn't help
  3. I have run
    • heroku buildpacks:clear
    • heroku buildpacks:set heroku/nodejs
    • heroku buildpacks:add heroku/ruby ... didn't help

Does anyone have any idea what is going on?

My github repo is https://github.com/HundredBillion/enneagram

Upvotes: 8

Views: 3314

Answers (4)

buys-fran
buys-fran

Reputation: 29

I have a few suggestions for you, let me know which one (if any) work for you.

In webpacker.yml for all instances of the below options

check_yarn_integrity: false
compile: true

Try

./bin/setup
rails webpacker:clobber
rails webpacker:compile

If none of the above work then perhaps one of these links will help:

Upvotes: 0

gorlaz
gorlaz

Reputation: 478

I had a different error where after updating/fiddling with tailwind my create-react-app wouldn't deploy (highly likely something it did).

my buildpack was node.js. changed per https://github.com/mars/create-react-app-buildpack#user-content-troubleshooting

Confirm that your app is using this buildpack:

heroku buildpacks If it's not using create-react-app-buildpack, then set it:

heroku buildpacks:set mars/create-react-app …and deploy with the new buildpack:

git commit --allow-empty -m 'Switch to create-react-app-buildpack' git push heroku master

Upvotes: 0

Aaron
Aaron

Reputation: 71

Stumbled across this post while stuck on a similar problem, hopefully this info will help someone in the future.

I solved my issue within the package.json file by moving the "tailwindcss" reference from the devDependencies to the dependencies block.

{
  "name": "app_name",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "jquery": "^3.5.1",
    "tailwindcss": "^1.2.0",  // <--- Now here.
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
                                    //<--- Was here.
    "webpack-dev-server": "^3.10.3"
  }
}

Upvotes: 7

Sohn
Sohn

Reputation: 51

I had the same problem with you but I tried this one and it worked for me.

Inside of config/webpacker.yml, you must set extract_css: true default is false.

Upvotes: 5

Related Questions