Проблемы со Stimulus в Rails 7.1.3

Вопрос или проблема

pin 'application'
pin '@hotwired/turbo-rails', to: 'turbo.min.js'
pin '@hotwired/stimulus', to: 'stimulus.min.js'
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
pin 'bootstrap', to: 'bootstrap.min.js', preload: true
pin '@popperjs/core', to: 'popper.js', preload: true
pin_all_from 'app/javascript/controllers', under: 'controllers'

import { Application } from "@hotwired/stimulus"
const application = Application.start()
application.debug = false
window.Stimulus   = application
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap
//= require_tree .

import "@hotwired/turbo-rails"

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  ...
}

Ответ или решение

Проблема, с которой вы сталкиваетесь, возникает из-за конфликтов имен при импорте контроллеров Stimulus. Давайте подробно рассмотрим, как можно исправить эту ошибку, чтобы ваши контроллеры работали корректно, не требуя явной регистрации.

Проблема

Когда вы создаете несколько контроллеров Stimulus и каждый из них импортирует Controller из @hotwired/stimulus, при этом у вас в коде вызывается имя Controller несколько раз, что вызывает ошибку Uncaught SyntaxError: Identifier 'Controller' has already been declared. Это происходит по одной причине: JavaScript не позволяет объявлять одну и ту же переменную дважды в одной и той же области видимости.

Решение

1. Изменение Структуры Импортов:

   Используйте именованные экспорты в ваших контроллерах, чтобы избежать конфликта. Вместо импорта Controller в каждом контроллере вы можете получить доступ к основному контроллеру через index.js.

   Пример кода вашего контроллера:

   import { Controller } from "@hotwired/stimulus"
   
   export default class YourControllerName extends Controller {
    // Ваш код
   }

   Убедитесь, что вы используете уникальные имена классов для каждого контроллера.

2. Объединение Импортов:

   В файле controllers/index.js вы можете импортировать все ваши контроллеры и регистрировать их автоматически:

   import { Application } from "@hotwired/stimulus"
   import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
   
   const application = Application.start()
   application.debug = false
   window.Stimulus = application
   
   eagerLoadControllersFrom("controllers", application)

   Убедитесь, что в вашей структуре проекта контроллеры находятся в папке app/javascript/controllers.

3. Проверка Уникальности Имен:

   Убедитесь, что каждое имя класса для контроллеров уникально. Например:

   // controllers/first_controller.js
   import { Controller } from "@hotwired/stimulus"
   
   export default class FirstController extends Controller {
    // Ваш код
   }
   
   // controllers/second_controller.js
   import { Controller } from "@hotwired/stimulus"
   
   export default class SecondController extends Controller {
    // Ваш код
   }

4. Применение Стиля Импортов:

   Старайтесь использовать единый стиль для импорта и экспорта, что поможет избежать неполадок в будущем.

Заключение

Следуя вышеизложенным рекомендациям, вы должны смочь успешно интегрировать несколько контроллеров Stimulus в ваше приложение без ошибок. Открывайте консоль разработчика в вашем браузере, чтобы проверить наличие новых ошибок, и убедитесь, что все ваши контроллеры загружаются корректно. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!