Cannot get any stimulus controller to work except Hello World

1

My hello world controller that comes with stimulus works in a Rails 7.1 app, but no other stimulus controller will. The app was created with the esbuild option.

I have tried:

  • using bin/rails javascript:clobber
  • restarting the dev server
  • renaming the forms controller
  • creating several other stimulus controllers with bin/rails g stimulus whatever

None of the above worked.

Code is below, what am I doing wrong here? As you can see, the forms controller is doing the same thing that the hello controller is, but the forms controller won’t do anything.

app/javascript/application.js:

import "@hotwired/turbo-rails"
import * as bootstrap from "bootstrap"
import "./controllers"

app/javascript/controllers/index.js:

import { application } from "./application"

import FormsController from "./forms_controller"
application.register("forms", FormsController)

import HelloController from "./hello_controller"
application.register("hello", HelloController)

app/javascript/controllers/forms_controller.js:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.textContent = "Forms from Stimulus!"
  }
}

app/javascript/controllers/hello_controller.js:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.textContent = "Hello World from Stimulus!"
  }
}

In my view:

<div data-controller="hello"></div>
<div data-controller="forms"></div>
2

After working on this for parts of two days, here’s what finally worked:

bin/rails assets:clobber

Running bin/rails javascript:clobber by itself was not enough to get the job done.