ElMassimo
vite builds twice and points to wrong one on heroku
- [x] I have tried upgrading by running
bundle update vite_ruby. - [x] I have read the troubleshooting section before opening an issue.
Description 📖
I'm attempting to use vite_rails and vite_ruby to build assets for a rails 7 app on heroku.
It's strangely building the assets twice and then pointing to the wrong one. Here is the problem I see:
remote: -----> Ruby app detected
remote: -----> Installing bundler 2.3.25
remote: -----> Removing BUNDLED WITH version in the Gemfile.lock
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-3.2.2
remote: -----> Installing dependencies using bundler 2.3.25
remote: Running: BUNDLE_WITHOUT='development:test' BUNDLE_PATH=vendor/bundle BUNDLE_BIN=vendor/bundle/bin BUNDLE_DEPLOYMENT=1 bundle install -j4
remote: Using rake 13.0.6
remote: Using concurrent-ruby 1.2.2
remote: Using i18n 1.14.1
remote: Using minitest 5.18.0
remote: Using tzinfo 2.0.6
remote: Using activesupport 7.0.5
remote: Using builder 3.2.4
remote: Using erubi 1.12.0
remote: Using racc 1.7.0
remote: Using nokogiri 1.15.2 (x86_64-linux)
remote: Using rails-dom-testing 2.0.3
remote: Using crass 1.0.6
remote: Using loofah 2.21.3
remote: Using rails-html-sanitizer 1.6.0
remote: Using actionview 7.0.5
remote: Using rack 2.2.7
remote: Using rack-test 2.1.0
remote: Using actionpack 7.0.5
remote: Using nio4r 2.5.9
remote: Using websocket-extensions 0.1.5
remote: Using websocket-driver 0.7.5
remote: Using actioncable 7.0.5
remote: Using globalid 1.1.0
remote: Using activejob 7.0.5
remote: Using activemodel 7.0.5
remote: Using activerecord 7.0.5
remote: Using marcel 1.0.2
remote: Using mini_mime 1.1.2
remote: Using activestorage 7.0.5
remote: Using date 3.3.3
remote: Using timeout 0.3.2
remote: Using net-protocol 0.2.1
remote: Using net-imap 0.3.4
remote: Using net-pop 0.1.2
remote: Using net-smtp 0.3.3
remote: Using mail 2.8.1
remote: Using actionmailbox 7.0.5
remote: Using actionmailer 7.0.5
remote: Using actiontext 7.0.5
remote: Using ast 2.4.2
remote: Using bcrypt 3.1.18
remote: Using msgpack 1.7.1
remote: Using bootsnap 1.16.0
remote: Using bugsnag 6.19.0
remote: Using bundler 2.4.10
remote: Using connection_pool 2.4.1
remote: Using dry-cli 1.0.0
remote: Using jbuilder 2.11.5
remote: Using method_source 1.0.0
remote: Using pagy 5.10.1
remote: Using parser 3.2.2.3
remote: Using pg 1.5.3
remote: Using puma 5.6.5
remote: Using rack-proxy 0.7.6
remote: Using thor 1.2.2
remote: Using zeitwerk 2.6.8
remote: Using railties 7.0.5
remote: Using rails 7.0.5
remote: Using redis 4.8.1
remote: Using scenic 1.7.0
remote: Using scout_apm 4.0.4
remote: Using sidekiq 6.1.3
remote: Using slack-notifier 2.4.0
remote: Using sprockets 4.2.0
remote: Using sprockets-rails 3.4.2
remote: Using stimulus-rails 1.2.1
remote: Using stripe 5.29.1
remote: Using turbo-rails 1.4.0
remote: Using vite_ruby 3.3.3
remote: Using vite_rails 3.0.15
remote: Bundle complete! 31 Gemfile dependencies, 70 gems now installed.
remote: Gems in the groups 'development' and 'test' were not installed.
remote: Bundled gems are installed into `./vendor/bundle`
remote: Bundle completed (0.27s)
remote: Cleaning up the bundler cache.
remote: Removing bundler (2.3.25)
remote: -----> Detecting rake tasks
remote: -----> Preparing app for Rails asset pipeline
remote: Running: rake assets:precompile
remote: yarn install v1.22.19
remote: [1/4] Resolving packages...
remote: success Already up-to-date.
remote: Done in 0.23s.
remote: npm notice
remote: npm notice New minor version of npm available! 9.6.7 -> 9.8.1
remote: npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.8.1>
remote: npm notice Run `npm install -g [email protected]` to update!
remote: npm notice
remote: Building with Vite ⚡️
remote: vite v4.3.9 building for production...
remote: transforming...
remote: ✓ 1025 modules transformed.
remote: rendering chunks...
remote: computing gzip size...
remote: ../../public/vite/manifest-assets.json 0.00 kB │ gzip: 0.02 kB
remote: ../../public/vite/manifest.json 0.62 kB │ gzip: 0.23 kB
remote: ../../public/vite/assets/application-07e63c71.css 3.74 kB │ gzip: 1.24 kB
remote: ../../public/vite/assets/application-10a0c8ae.css 93.96 kB │ gzip: 14.98 kB
remote: ../../public/vite/assets/index-9174f13a.js 9.08 kB │ gzip: 2.92 kB │ map: 30.22 kB
remote: ../../public/vite/assets/application-2098b6e1.js 1,382.15 kB │ gzip: 423.01 kB │ map: 4,541.36 kB
remote: ✓ built in 11.11s
remote: Build with Vite complete: /tmp/build_da557d1e/public/vite
Notice these two lines in particular
remote: ../../public/vite/assets/application-07e63c71.css 3.74 kB │ gzip: 1.24 kB
remote: ../../public/vite/assets/application-10a0c8ae.css 93.96 kB │ gzip: 14.98 kB
The first one is my normal css file with some minor styling. The second is the same file + tailwindcss.
When I go to look at the production site on heroku, it points to the wrong one
I'm just not sure I can go about debugging this. I've followed the instructions on https://vite-ruby.netlify.app/guide/deployment.html#using-heroku and have an identical setup they have.
Hi Buford!
Please specify which tag helpers you are using to reference the built assets, by sharing a code sample or providing a minimal reproduction.
Based on what you've shared so far, it's likely that one of the generated CSS files corresponds to a CSS entrypoint, while the other one corresponds to the CSS imported by a JS entrypoint. You would want to reference the latter, but might be using vite_stylesheet_tag instead of vite_javascript_tag.
I had this exact same issue! I'm not sure if it's a bug or not but I worked around it by renaming javascript/entrypoints/application.css (the one with my actual app's source/Tailwind imports, etc.) to styles.css and referenced it with <%= vite_stylesheet_tag "styles" %> so it doesn't get clobbered by the stylesheet <%= vite_javascript_tag "application" %> spits out for JS-generated styles.
