Rails 7: Stimulus not working, no errors in console

Question

I am following the instructions on https://github.com/hotwired/stimulus-rails/ and executed

Add the stimulus-rails gem to your Gemfile: gem 'stimulus-rails'
Run ./bin/bundle install.
Run ./bin/rails stimulus:install

below is the app/javascripts/controller/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = true
window.Stimulus   = application

Stimulus.handleError = (error, message, detail) => {
  console.warn(message, detail)
  ErrorTrackingSystem.captureException(error)
}

export { application }
console.log('helllo world');

below is the app/javascripts/controller/hello_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects with data-controller="hello"
export default class extends Controller {
  static targets = [ "name", "output" ]

  connect() {
    console.log('connected');
  }

  greet() {
    console.log('hello world!!');
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}

below is the app/javascripts/controller/index.js

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)
console.log('hellow');

here is the relevant view code in one of the index pages

<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">Greet</button>

  <span data-hello-target="output"></span>

</div>

After adding text and clicking greet button nothing happens, nothing in the browser console, no errors or warnings.

any help here would be great, Thanks.

Answer 1

Upgrading from webpacker wasn't that bad, so you might as well spend time on moving to something else than fixing all these issues.

But in case you want to compare your set up, here what I've figured out:

# Rails 7.0.6
nvm use 16
rails new install_nojs -J
cd install_nojs
bundle add webpacker stimulus-rails
rails webpacker:install
rails stimulus:install
rails g controller Home index
yarn add @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object --dev

bin/webpack-dev-server
bin/rails s

// app/javascript/packs/application.js

console.log('Hello World from Webpacker')

import "../controllers"

# app/views/layouts/application.html.erb

<%= javascript_pack_tag "application" %>

Note that packages were renamed with @hotwired prefix at some point:

// import { Controller } from "stimulus"           // nay
import { Controller } from "@hotwired/stimulus"    // yay

export default class extends Controller {
  static targets = [ "name", "output" ]
  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}

<!-- app/views/home/index.html.erb -->
<div data-controller="hello">
  <input data-hello-target="name" type="text">
  <button data-action="click->hello#greet">Greet</button>
  <span data-hello-target="output"></span>
</div>

open http://localhost:3000/home/index

This works.