Rails 7 Importmap Pins incompatible Jquery source

Question

Question

Why does the source generated by the importmaps command not work with Bootstrap 4.6.1 but a modified source for the same version of jquery work?

Problem Details

I created a rails 7 app using importmaps to manage the javascript.

I am pinning an older version of Bootstrap (4.6.1) manually in importmap.rb

When I run bin/importmap pin jquery the following gets added to importmap.rb

pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"

Loading the site and looking at Chrome Web Tools displays this error message and jquery functionality such as drop-down menus and accordions do not function

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

However, when I update the jquery source manually in importmap.rb to be

pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/jquery.js"

the error message is resolved and functionality is restored.

To my eye the sources are almost identical, they are both jquery 3.6.0

https://ga.jspm.io/npm:[email protected]/dist/jquery.js

https://ga.jspm.io/npm:[email protected]/jquery.js

Working Configuration

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/[email protected]/dist/js/bootstrap.min.js"
pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/[email protected]/lib/index.js"

Answer 1

I have a similar setup, and it works. Make jQuery available to the whole page, replace your imports at application.js by:

import jquery from 'jquery'
window.$ = jquery

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