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>