Rails app doesn't load updates to Javascript files until I run rails assets:precompile

Question

I have an old Rails app that I'm trying to upgrade to Rails 7. Somewhere in the upgrade process I broke the asset pipeline. When I make updates to a javascript file, the changes aren't visible unless I run rails assets:precompile and restart the server.

When I do run rails assets:precompile , I get a bunch of compiled JS and CSS assets in my public/assets folder. This seems like an outdated version of the asset pipeline process.

This project is a personal project that I've had lying around for years and it spans Rails versions from 4 to 7. It's never had a user base, it's just an idea that I go back and work on from time to time. So it's possible I have an old version of the assets pipeline running.

I created a new Rails 7 project from scratch and it works as expected. I've been trying to make the new project as close to my existing project as I can to see where my current project is breaking, but that is becoming extremely difficult and not yielding any results yet.

I'm sure I must have some old configuration still in place but I have no idea where to look. I can't remember ever having this problem before. I would love any suggestions on where to look for differences between the old broken application and the new one that works.

Answer 1

I started like this:

rails _6.1.4.4_ new rails_upgrade
cd rails_upgrade

bundle remove webpacker  # obsolete
bundle remove turbolinks # obsolete
bundle remove sass-rails # outdated
bundle remove rails
bundle add rails --version "~> 7.0"

bin/rails app:update
bin/rails db:migrate

Gemfile untouched, how are you supposed to know the new defaults unless you run rails new . Digging deep into app generator you can generate just the necessary file:

require "rails/generators/rails/app/app_generator"

Rails::Generators::AppGenerator.new(["rails"],
  {javascript: "esbuild", force: true}, # `rails new` options
  destination_root: "tmp")              # don't mess up the root directory
    .template("Gemfile")                # or `.send(:build, :gemfile)`

puts File.read("tmp/Gemfile")

But you probably want to do:

bundle add jsbundling-rails turbo-rails stimulus-rails sprockets-rails

bin/rails javascript:install:esbuild
bin/rails turbo:install
bin/rails stimulus:install

Remove app/javascript/packs and webpacker related things, like, javascript_pack_tag .

New javascript entry is app/javascript/application.js . You have to build it with esbuild to use in your layout:

# this every time
bin/dev

Compiled files go into app/assets/builds/ . This directory is in app/assets/config/manifest.js , so every file can be precompiled in production.

You should have this in your layout:

<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
# NOTE: no turbolinks                      ^^^^^^^^^^^^^^^^

Do not precompile , it is not a solution. Run this as well to undo, this is not optional:

bin/rails assets:clobber

bin/rails assets:precompile is for production, not development.

As far as javascript is concerned it should work and reload if it compiles without errors. These are simplified upgrade steps, but the number of times people said the assets are not reloading, I couldn't reproduce it. Most of the time these are the solutions:

bin/rails assets:clobber
bin/dev # if you have it, and you should unless you're using importmap-rails

Answer 2

So this is really unsatisfying, but what finally resolved this issue was that I removed the bootsnap gem. I don't know what was happening or why, but after removing this gem, it behaved normally.