heroku - CSS is off when running rails 6 project on production but not on development

Question

I'm working on a Rails project that runs fine on my machine. However on Heroku some of the CSS is off.

Here's what I've tried.

The code on my machine is exactly the same as on Heroku server. I've tried compating compiled CSS files from my machine to Heroku and it matches exactly. I've tinkered with many development.rb and production.rb settings to no avail.

When I run rake assets:precompile on Heroku I get this interesting message:

autoprefixer:/app/app/assets/stylesheets/application.css:29539:3: Gradient has outdated direction syntax. New syntax is like 'closest-side at 0 0` instead of '0 0, closest-side'.

I was able to replicate the problem (SOMETIMES) by running: rake assets:precompile RAILS_ENV=production

Then if I try to fire up the server I get an YARN integrity

warning: warning Integrity check: Flags don't match error Integrity check failed error Found 1 errors.

Your Yarn packages are out of date! Please run yarn install --check-files to update.

I've tried to find out more about this error but that felt impossible, running "yarn check --integrity --verbose" I get this

error Integrity check failed
verbose 0.656281167 Error: Found 1 errors.
    at MessageError.ExtendableBuiltin (/usr/share/yarn/lib/cli.js:721:66)
    at new MessageError (/usr/share/yarn/lib/cli.js:750:123)
    at /usr/share/yarn/lib/cli.js:61104:13
    at Generator.next (<anonymous>)
    at step (/usr/share/yarn/lib/cli.js:310:30)
    at /usr/share/yarn/lib/cli.js:321:13
error Found 1 errors.

When I run "yarn install --check-files" I get this not very helpful message

yarn install v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > ts-loader@8.0.14" has unmet peer dependency "webpack@*".
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 33.32s.

My best guess is that for some reason production environment is triggering different versions for some dependency, and that is causing some css to be wrongfully compiled (were using SASS by the way).

I'm not really sure how to proceed to fix this. My best guess was precompiling as production and try to fix the css to work with how it loads on heroku, but that seems a bit off. Any ideas will be very helpful.

question from:https://stackoverflow.com/questions/66051801/css-is-off-when-running-rails-6-project-on-production-but-not-on-development

Answer 1

Waitting for answers