Working through a tutorial and I am missing something. There is a stimulus controller that is being developed to show/hide some content. The first task was just to console.log out the word "Click!" to the console.

Now I have updated the controller to handle the show/hide behavior however the only thing that is happening is that is keeps console.logging out 'Click!'

I searched my app and found some files in the .cache in node_modules that had that code still in it so I removed that, it still appears now even though there is no reference to 'Click!' in the code at all.

Webpack is compiling without error (and has compiled many times asI have tried to debug this).

You can even see that the referenced line no longer matches

The controller is

import { Controller } from "stimulus"

export default class FavoriteToggleController extends Controller {
  static targets = ["elementToHide","elementWithText"] // Stimulus requires that any targets in use from the controller need to be declared in a static variable called 'targets'
  static values  = { visible: Boolean } 

  elementToHideTarget: HTMLElement // typescript visible declaration of the property
  elementWithTextTarget: HTMLElement

  visibleValue: Boolean

  connect(): void {
    this.updateHiddenClass()
    this.updateText()
  }

  toggle(): void {
    this.flipState()
    this.updateHiddenClass()
    this.updateText()
  }

  // functions
  flipState(): void {
    this.visibleValue = !this.visibleValue
  }

  visibleValueChanged(): void {
    this.updateHiddenClass()
    this.updateText()
  }

  updateHiddenClass(): void {
    this.elementToHideTarget.classList.toggle("hidden", !this.visibleValue)
  } 

  newText(): string {
    return this.visibleValue ? "Hide" : "show"
  }

  updateText(): void {
    this.elementWithTextTarget.innerText = this.newText()
  }
}

View

<%= turbo_frame_tag("favorite-concerts") do %>
  <section class="my-4" data-controller="favorite-toggle" data-favorite-toggle-visible-value="true">
    <div class="text-3xl font-bold"> 
      Favorite Concerts
      <button class="<%= SimpleForm.button_class %> py-1 text-xl font-semibold" data-action="favorite-toggle#toggle">  
        Hide
      </button>
    </div>
    <div data-favorites-tottle-target="elementToHide">
      <div class="text-xl font-bold" id="no-favorites">
        <% if current_user.favorites.empty? %>
          No favorite concerts yet
        <% end %>
      </div>
      <div id="favorite-concerts-list">
        <% current_user.favorites.each do |favorite| %>
          <%= render(favorite) %>
        <% end %>
      </div>
    </div>
  </section>
<% end %>

Folder structure

There are no errors in the console at all, just this old code that keeps executing.

I have done a hard refresh, restarted everything, nothing makes this go away.