404 errors on javascript when using importmaps in Rails 7 in production

Question

I'm not sure if this is an importmaps issue or something else, but in Rails 7.0.0.alpha2, I'm getting 404 errors on the javascript files.

Wondering if I'm missing some sort of production "compile" step as it works fine in development.

# app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"


# app/javascript/controllers/index.js
import { application } from "./application"

import VoteController from "./vote_controller.js"
application.register("vote", VoteController)


# app/javascript/controllers/vote_controller.js
import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="vote"
export default class extends Controller {
  static targets = ["element"];

  toggle(event) {
    //event.preventDefault();
    event.target.classList.add("opacity-100");
    event.target.classList.remove("opacity-0");
  }
}


# config/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.js"
pin "@hotwired/stimulus", to: "stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"

Then in my app/views/layouts/application.html.erb file I'm using <%= javascript_importmap_tags %> to include it all.

If I set config.assets.compile = true in production.rb, the errors go away...but I'm not sure why or if that's fixing the core issue.

Were you able to find any resolutions for this other than config.assets.compile = true in production? I'm hitting this issue from a Rails 7.0.0.alpha2 app. I upgraded to 7.0.0.rc1 and still have the issue in prod on Heroku. — ianneub, Dec 11 '21 at 15:40
Same problem, same "solution." Brand new Rails RC1 installation. — Joe Sak, Dec 14 '21 at 02:30

ianneub · Answer 1 · 2021-12-16T19:15:00.463

With Rails 7.0.0 the app/javascript/controllers/index.js has been modified. I have found a couple of different ways to fix the issue.

First try changing your import { application } line to import from controllers/application, like this:

import { application } from "controllers/application"

Then modify each specific controller import's from parameter to look like: "controllers/name_controller".

Optionally:

Remove the individual imports for each controller and use:

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

Or this:

// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
lazyLoadControllersFrom("controllers", application)

This seems to have fixed it for me. Curiously the rails stimulus:manifest:update command will replace it with the old style that doesn't work.

More info and discussion on root cause: https://github.com/hotwired/stimulus-rails/issues/87

Lucas Caton · Answer 2 · 2021-12-29T06:06:24.080

If you're using Rails 7.0.0+ (stable version), you no longer need to run rails stimulus:manifest:update (when using import maps) nor need to import each controller individually.

So replace whatever you have in your app/javascript/controllers/index.js with the following:

// Import and register all your controllers from the importmap under controllers/*

import { application } from "controllers/application"

// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
// lazyLoadControllersFrom("controllers", application)

The above code was copied from https://github.com/hotwired/stimulus-rails/blob/main/lib/install/app/javascript/controllers/index_for_importmap.js.

404 errors on javascript when using importmaps in Rails 7 in production

2 Answers2