search

ElMassimo / vite_ruby

⚡️ Vite.js in Ruby, bringing joy to your JavaScript experience
https://vite-ruby.netlify.app/
MIT License
1.28k stars 117 forks source link

vite builds twice and points to wrong one on heroku #387

Open bufordtaylor opened 1 year ago

bufordtaylor commented 1 year ago

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 npm@9.8.1` 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

wrong build file

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.

ElMassimo commented 1 year ago

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.

kmarsh commented 1 year ago

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.