Rails 7 Importmap Pins несовместим с источником Jquery

Question

Вопрос

Почему исходный код, сгенерированный командой importmaps, не работает с Bootstrap 4.6.1, но работает модифицированный исходный код для той же версии jquery?

Сведения о проблеме

Я создал приложение для рельсов 7, используя importmaps для управления javascript.

Я вручную закрепляю старую версию Bootstrap (4.6.1) в

Когда я бегу bin/importmap pin jquery следующее добавляется к

      pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"

При загрузке сайта и просмотре веб-инструментов Chrome отображается это сообщение об ошибке, а функции jquery, такие как раскрывающиеся меню и аккордеоны, не работают.

      Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
    at Object.jQueryDetection (bootstrap.min.js:6:2464)

Однако, когда я обновляю источник jquery вручную, чтобы он был

      pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/jquery.js"

сообщение об ошибке устранено, и функциональность восстановлена.

На мой взгляд, источники почти идентичны, они оба jquery3.6.0.

      https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js

      https://ga.jspm.io/npm:jquery@3.6.0/jquery.js

Рабочая конфигурация

application.js

      
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
import "controllers"

import  "jquery";
import * as bootstrap from "bootstrap";

importmap.rb

      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_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "https://code.jquery.com/jquery-3.6.0.min.js", preload: true
pin "bootstrap", to: "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.2/lib/index.js"

Answer 1

У меня аналогичная схема, работает. Сделайте jQuery доступным для всей страницы, замените импорт в application.js на:

      import jquery from 'jquery'
window.$ = jquery

import * as bootstrap from 'bootstrap'
window.bootstrap = bootstrap

Answer 2

Я боролся с этим, и то, что решило это для меня, было:

• С добавлением Jqueryimportmap
• Теперь вы переходите к пути конфигурации Rails «@hotwired/stimulus», чтобы настроить «jquery» в:app/javascript/controllers/application.js

      import { Application } from "@hotwired/stimulus"
...
import jQuery from "jquery"

window.jQuery = jQuery
window.$ = jQuery
...

• Просто для информации, в моем случае это выглядело так:

      import { Application } from "@hotwired/stimulus"
import jQuery from "jquery"

const application = Application.start()

// Configure Stimulus development experience
application.debug = false
window.Stimulus   = application
window.jQuery = jQuery
window.$ = jQuery

export { application }