New user - 'Is This Thing On?' Possibly not

1

I’m a new Stimulus user, following the handbook.
I cloned stimulus-starter to work within my own editor. All went fine until ‘Is This Thing On?’.
Clicking the ‘greet’ button gave no response in the console. The connect method in the hello controller doesn’t seem to trigger.
Any suggestions on how to identify the problem?
Thanks
Daniel

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    <script src="bundle.js" async></script>
  </head>
  <body>
    <div data-controller="hello">
      <input type="text">
      <button>Greet</button>
    </div>
  </body>

// src/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!", this.element)
  }
}
2

Is there a console output when you reload the page? Connect method should run when the controller is connected to the DOM. You have nothing attached on your <button> so it doesn’t do anything.

3

No, the console is empty (and stays empty on reload).

The handbook says:

Next, we need to tell Stimulus how this controller should be connected to our HTML. We do this by placing an identifier in the data-controller attribute on our <div>

Which I’ve done.

As far as I can see I’ve followed the handbook instructions precisely (twice), but get no console output.

4

This might not be relevant here (I’m not familiar with the Starter project you’re referring to). But, when I first started looking into Stimulus (I’m new here), I didn’t understand how Stimulus mapped the data-controller value to the controller file seeing as any bundling would remove individual files.

Eventually, I read that the Ruby on Rails packaging does some automagic mapping. And, that if I wasn’t using the RoR asset bundling (which I’m not), I would have to explicitly tell Stimilus which identifier mapped to which JavaScript class.

From the Stimulus handbook:

// src/application.js
import { Application } from "@hotwired/stimulus"
import HelloController from "./controllers/hello_controller"

window.Stimulus = Application.start()
Stimulus.register("hello", HelloController) // <==== EXPLICIT MAPPING.

Is it possible that you’re missing this explicit mapping between the DOM attribute and the Controller class?

5

Thanks Ben. You are probably onto something.
I tried adding the script under ‘Using Without a Build System’

  <script type="module">
    import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
    window.Stimulus = Application.start()

    Stimulus.register("hello", class extends Controller {
      static targets = [ "name" ]

      connect() {
      }
    })
  </script>

to the <head> but still nothing.

Perhaps I am better off trying it out on Glitch or within Rails…

6

Good luck! Sorry I couldn’t be more help. Very new to this stuff myself.

7

Can you show the entire HTML file so we can take a look?

8 
<!--index.html-->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="module">
      import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
      window.Stimulus = Application.start()

      Stimulus.register("hello", class extends Controller {
        static targets = [ "name" ]

        connect() {
        }
      })
    </script>
  </head>
  <body>
    <div data-controller="hello">
      <input type="text">
      <button>Greet</button>
    </div>
  </body>
</html>

// src/controllers/hello_controller.js
import { Controller } from “@hotwired/stimulus”

export default class extends Controller {
connect() {
console.log(“Hello, Stimulus!”, this.element)
}
}

// src//index.js
import { Application } from “@hotwired/stimulus”

import { definitionsFromContext } from “@hotwired/stimulus-webpack-helpers”

const application = Application.start()

const context = require.context(“./controllers”, true, /.js$/)

application.load(definitionsFromContext(context))

9

It looks like you’re not actually doing anything in your connect method. Do you get any logging in your console when you replace the connect with this code?

connect() {
  console.log('Hello, world!');
}
10

I gave this a go, but no, nothing.

11

From the code sample, I can identify several areas to look at.

  1. The hello controller is created twice. Once in src/controllers/hello_controller.js and once in the HTML file Stimulus.register("hello", class extends Controller
  2. It appears you may be using webpack from import { definitionsFromContext } from “@hotwired/stimulus-webpack-helpers”, however the HTML file source does not include the output of the file generated by webpack, so index.js and hello_controller.js are not loaded.

FYI, here’s a working example of the code you are working on https://codepen.io/tleish/pen/XWBwxXm?editors=1111

12

There is a webpack version of the automagic, in case you get annoyed with registering controllers explicitly:
https://stimulus.hotwired.dev/handbook/installing#using-webpack-helpers

13

Ah, this was unfortunate. Turns out, my console messages were not showing, because I had left a string in the “filter” textbox as described here:
https://stackoverflow.com/questions/19662018/console-log-not-working-at-all

I’m back on track now. Thanks for the efforts to find a solution.

Daniel