Stimulus JS Controllers not connecting to Rails App

Question

I'm working on a Rails 7.0.2 App with Ruby 3.0.2 and I'm following the stimulus tutorial for making a clipboard copy button https://stimulus.hotwired.dev/handbook/hello-stimulus .When I press the button nothings happened and I've over ridden my controllers connect method to log to the console upon connection but nothing gets logged. I'm also getting some weird messages in the browser dev tools:

Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”. data:28:7
Uncaught Error: Unable to resolve specifier '@rails/request.js' imported from http://localhost:3000/assets/application-234f8bed8636066fccb3be9d9c37552702ed61ecdcfeb919a52fa12d5a694d68.js

My controller:

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="copy"
export default class extends Controller {
  static targets = ["source"]

  connect() {
    console.log("connect");
    alert("connect")
  }

  copy(){
    navigator.clipboard.writeText(this.sourceTarget.value)
  }
}

HTML:

    <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" data-controller="copy">
        <dt class="text-sm font-medium text-gray-500">Request URL</dt>
        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" data-copy-target="source"><%= @url %></dd>
        <button data-action="copy#copy">Copy!</button>
      </div>

How do I connect my Stimulus controllers to my app?

Answer 1

have you tried to add the indicator "click"

<button data-action="click->copy#copy">Copy!</button>

Answer 2

It looks like you have some unrelated javascript errors on the page. That will stop your controller from firing. Also, ensure that the stimulus controller was added to the manifest. Make sure the compiled assets have the controller. You may need to do assets:clobber assets:precompile.