We've moved discussions to Discord

Join Discord

[RESOLVED] Can't deploy to heroku after merging latest Jumpstart version.

tommersio •
Hi all,

I having trouble deploying my app to Heroku after upgrading to the latest version of Jumpstart.

I fetched the latest commits from the Jumpstart Pro repo and merged them into my local master branch, and everything works on my local server, but however, when I deploy to Heroku the build fails.

Here's the feedback I'm getting in the console. After running git push Heroku master
remote:        Compiling...
remote:        Compilation failed:
remote:        
remote:        risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefault
remote:        risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
remote:        risk - https://tailwindcss.com/docs/upcoming-changes
remote:        
remote:        warn - Tailwind is not purging unused styles because no template paths have been provided.
remote:        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.
remote:        warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
remote:        TypeError: Cannot read property 'toLowerCase' of undefined
remote:            at /tmp/build_3765e74b/css/application-777dda2e.css:1415:2
remote:            at /tmp/build_3765e74b/css/application-777dda2e.css:1418:3
remote:            at hasInherit (/tmp/build_3765e74b/node_modules/postcss-merge-longhand/dist/lib/canExplode.js:13:39)
remote:            at exports.default (/tmp/build_3765e74b/node_modules/postcss-merge-longhand/dist/lib/canExplode.js:22:13)
remote:            at /tmp/build_3765e74b/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:192:39
remote:            at /tmp/build_3765e74b/node_modules/postcss/lib/container.js:198:18
remote:            at /tmp/build_3765e74b/node_modules/postcss/lib/container.js:135:18
remote:            at Rule.each (/tmp/build_3765e74b/node_modules/postcss/lib/container.js:101:16)
remote:            at Rule.walk (/tmp/build_3765e74b/node_modules/postcss/lib/container.js:131:17)
remote:            at Rule.walkDecls (/tmp/build_3765e74b/node_modules/postcss/lib/container.js:196:19)
remote:            at Object.explode (/tmp/build_3765e74b/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:191:10)
remote:            at /tmp/build_3765e74b/node_modules/postcss-merge-longhand/dist/index.js:21:19
remote:            at Array.forEach (<anonymous>)
remote:            at /tmp/build_3765e74b/node_modules/postcss-merge-longhand/dist/index.js:20:28
remote:            at /tmp/build_3765e74b/node_modules/postcss/lib/container.js:239:18
remote:            at /tmp/build_3765e74b/node_modules/postcss/lib/container.js:135:18
remote:            at Root.each (/tmp/build_3765e74b/node_modules/postcss/lib/container.js:101:16)
remote:            at Root.walk (/tmp/build_3765e74b/node_modules/postcss/lib/container.js:131:17)
remote:            at Root.walkRules (/tmp/build_3765e74b/node_modules/postcss/lib/container.js:237:19)
remote:            at /tmp/build_3765e74b/node_modules/postcss-merge-longhand/dist/index.js:19:13
remote:            at initializePlugin (/tmp/build_3765e74b/node_modules/cssnano/dist/index.js:31:51)
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.

Any idea how I can resolve this issue? I've been spending almost the full day trying to solve this without any luck.

Lee McAlilly •
+1 on this issue. Troubleshooting it now. Will respond if I figure it out.
Lee McAlilly •
Update. I believe that this could be due to connecting to the database during asset compilation.

Be careful if you're using Staging and Production environments (might be nice to add this to the docs).

Here are some things to double-check:

  • Make sure you're sharing the correct credentials / master key with your Heroku app. These will be different for each environment.
  • Don't forget to add redis and postgres to your Heroku app.
  • Don't forget to run your migrations on heroku
    •  heroku run rails db:migrate
  • Because I was trying to set up Staging and Production, I had to also add a database password as a Heroku config. More on that here. The password can be whatever you want and then whatever you call the "Config Vars" key on your heroku app should match your config/database.yml file for that environment, like this: <%= ENV['YOUR_APP_NAME_DATABASE_PASSWORD'] %>
    • In this example your config vars key on your heroku account would be `YOUR_APP_NAME_DATABASE_PASSWORD` and then the password can be whatever.
  • Also wouldn't hurt to go ahead and create a new admin user:
    • User.create name: "Steve Jobs", email: "steve@apple.com", password: "password", password_confirmation: "password", admin: true, terms_of_service: true
    • Then run heroku restart
    • You could also try dropping the database, creating it and then running the migrations again:
      • heroku run rails db:drop
      • heroku run rails db:create

If it's still not working after all of that, share your stack trace again here if it's giving you a new/different error.
Richard •
+1 on this issue after merging the latest changes.
tommersio •
Lee McAlilly , Thanks for the suggestions, I tried the check off the items on the list but without any luck. I deploy against production, so can't drop/create the database.

Did you manage to resolve the issues on your end?



tommersio •
I'm still stuck with this issue. Anyone else here who run into this and figured out how to resolve it?

I removed all my credentials files and recreated them, and added the new produktion.key as an RAILS_MASTER_KEY in Heroku, but that didn't help.

I've also run precompile locally before deploying, with this script
RAILS_ENV=production bundle exec rake assets:precompile

Which returned the following trace from my console.
yarn install v1.22.4warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.[1/4] 🔍  Resolving packages...[2/4] 🚚  Fetching packages...warning np@6.5.0: The engine "git" appears to be invalid.[3/4] 🔗  Linking dependencies...warning " > vue-loader@15.9.3" has unmet peer dependency "css-loader@*".warning " > vue-loader@15.9.3" has unmet peer dependency "webpack@^3.0.0 || ^4.1.0 || ^5.0.0-0".warning " > webpack-dev-server@3.11.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0".[4/4] 🔨  Building fresh packages...✨  Done in 5.84s.Compiling...Compilation failed:
risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefaultrisk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.risk - https://tailwindcss.com/docs/upcoming-changes
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-cssTypeError: Cannot read property 'toLowerCase' of undefined    at /Users/tommyengstrom/groundhop/css/application-64f7b5b4.css:1395:2    at /Users/tommyengstrom/groundhop/css/application-64f7b5b4.css:1398:3    at hasInherit (/Users/tommyengstrom/groundhop/node_modules/postcss-merge-longhand/dist/lib/canExplode.js:13:39)    at exports.default (/Users/tommyengstrom/groundhop/node_modules/postcss-merge-longhand/dist/lib/canExplode.js:22:13)    at /Users/tommyengstrom/groundhop/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:192:39    at /Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:198:18    at /Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:135:18    at Rule.each (/Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:101:16)    at Rule.walk (/Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:131:17)    at Rule.walkDecls (/Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:196:19)    at Object.explode (/Users/tommyengstrom/groundhop/node_modules/postcss-merge-longhand/dist/lib/decl/borders.js:191:10)    at /Users/tommyengstrom/groundhop/node_modules/postcss-merge-longhand/dist/index.js:21:19    at Array.forEach (<anonymous>)    at /Users/tommyengstrom/groundhop/node_modules/postcss-merge-longhand/dist/index.js:20:28    at /Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:239:18    at /Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:135:18    at Root.each (/Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:101:16)    at Root.walk (/Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:131:17)    at Root.walkRules (/Users/tommyengstrom/groundhop/node_modules/postcss/lib/container.js:237:19)    at /Users/tommyengstrom/groundhop/node_modules/postcss-merge-longhand/dist/index.js:19:13    at initializePlugin (/Users/tommyengstrom/groundhop/node_modules/cssnano/dist/index.js:31:51)
Lee McAlilly •
That sounds like you're using both NPM and Yarn. You need to use one or the other package manager. Try deleting package-lock.json and yarn.lock in your app's root directory, then running yarn install again to only use Yarn as your node package manager.  Also go ahead and delete /public/assets folder if that has been generated by your attempts to precompile the assets. I wouldn't check that into version control. Commit those changes then try to deploy again and see if that works.

Also, in my experience deploying Rails to Heroku, if you find yourself needing to run bundle exec rake assets:precompile then that is likely a symptom of another issue. You shouldn't need to do that if everything is configured correctly. 
Tiago Casanova •
Hi guys,

The error originates from app/javascript/stylesheets/components/forms.scss and is related with the theme() method used to access the colors TailwindCSS variables (lines 13 & 100).

Not sure how to properly set it up for Webpack just yet, but feel free to modify those lines to either use @apply or rgba, search for similar CSS.

EDIT: didn't have time to look more into it yet, if anyone wants to take a swing at it.... 😅
tommersio •
Ok, Removing the theme() method in app/javascript/stylesheets/components/forms.scss solved the issue for me.

Thanks for the help Tiago Casanova   and Lee McAlilly  


My Discussions Participating All Discussions
Notifications
You’re not receiving notifications from this thread.