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
– ianneub, Commented Dec 11, 2021 at 15:40
Same problem, same "solution." Brand new Rails RC1 installation. — Joe Sak
– Joe Sak, Commented Dec 14, 2021 at 2:30

Lucas Caton · Accepted Answer · 2025-03-20 01:05:42Z

4

If you're using Rails 7.0+, 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 via controllers/**/*_controller
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("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.

edited Mar 20 at 1:05

answered Dec 29, 2021 at 6:00

Lucas Caton

3,3251 gold badge26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ianneub · Accepted Answer · 2021-12-16 19:15:00Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related