HMR not working when updating app/components/{component_name}.html.erb in Rails 7

70 Views Asked by At

Setup:

  • rails new fake_app -d postgresql -c tailwind

Configuration:

Additional gems:

  • bundle add view_component

Created a new component:

  • rails g component header

Updated tailwind.config.ts as follows:

content: [
    './app/components/**/*.{rb,html,erb}',
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'

Edited Procfile.dev as follows:

web: bundle exec rdbg --open -n -c -- bundle exec rails s -p 3000
css: bundle exec rails tailwindcss:watch[poll]

# have run this with and without the "[poll]" command

spinning up server as follows:

bin/dev

Problem:

When I make changes to the component template (in app/components/#{whatever}.html.erb) there is no HMR.

other fixes I've attempted

  1. rails_live_reload gem
  2. guard-livereload paired with rack-livereload (including required configuration listed on both of their READMEs)
  3. rails assets:clobber and rails tailwindcss:clobber - ineffective
  4. solutions in these following SO similar questions: one two
  5. Solutions attempted from GH: one

misc.

the views trigger the HMR just fine; But nothing, and I mean nothing, works with these view components.

random thing

while following this github thread I came across the comment here and attempted to run rails tailwindcss:build and go this error:

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest

But that lead me down a rabbit hole of attempting to correct the caniuse-lite issue, which is almost a deeper rabbit hole

Unambiguous question:

How can I use HMR via tailwind in Rails 7 when editing my tailwind components located in app/components/?

0

There are 0 best solutions below