Rails 7 アプリでスティミュラスコントローラーがまったく機能しない

概要

現在開発中の Rails 7 アプリで Stimulus コントローラーを機能させるのに非常に苦労しています。どなたか助けていただければ幸いです。私は永遠に車輪を回し続けてきました。

私のアプリケーション.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails";
import "controllers";
import 'bootstrap';

以下のように importmap.rb に Stimulus を固定しました。

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "jquery", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"
pin_all_from "app/javascript/controllers", under: "controllers"

javascript/controllers/application.js ファイルやindex.js ファイルには触れていません。

私の刺激コントローラー (ingredients-controller.js):

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {

  connect () {
    console.log('HELLOOO!!!!');
  }
  addIngredients(event) {
    event.preventDefault();
    alert('test');
  }
}

以下のビューで

を接続しました。現時点で私が試みているのは、

概要

解決策