I'm having trouble getting Rails 7 importmaps to play nicely with jquery and bulma.
config/importmap.rb:
pin "application", preload: truepin "@hotwired/turbo-rails", to: "turbo.min.js", preload: truepin "@hotwired/stimulus", to: "stimulus.min.js", preload: truepin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: truepin_all_from "app/javascript/controllers", under: "controllers"pin "bulma", preload: true # @0.9.4pin "jquery", preload: true # @3.7.0pin "jquery-ujs", preload: true # @1.2.3pin "jquery-ui", preload: true # @1.13.2application.html.erb:
<head> ...<%= csrf_meta_tags %><%= csp_meta_tag %><%= javascript_importmap_tags %><%= stylesheet_link_tag "application", "data-turbo-track": "reload" %><%= favicon_link_tag asset_path("favicon.png") %><link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"><link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" /></head>app/assets/javascripts/application.js:
import "@hotwired/turbo-rails"import "controllers"//= require jquery//= require jquery.turbolinks//= require jquery_ujs//= require turbolinks// require lightbox//= require_tree .//= require bulmaapp/assets/config/manifest.js:
//= link_tree ../images//= link_directory ../stylesheets .css//= link_tree ../javascripts .js//= link_tree ../../../vendor/javascript .js//= link controllers/hello_controller.js//= link controllers/application.js//= link controllers/index.jsapp/javascript/application.js:
import { Application } from "@hotwired/stimulus"import "controllers"import "bulma"import * as jquery from "jquery"import "jquery-ujs"import "jquery-ui"window.jQuery = jquerywindow.$ = jqueryconst application = Application.start()// Configure Stimulus development experienceapplication.debug = falsewindow.Stimulus = applicationexport { application }app/javascript/controllers/index.js
import { application } from "controllers/application"import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"eagerLoadControllersFrom("controllers", application)In the javascript console when I try to load my application, it appears as though the bulma styling is working, but jquery is not. I'm seeing "Uncaught ReferenceError: $ is not defined" even though I am setting $ in application.js. There is also another error telling me "Uncaught TypeError: The specifier “controllers/application” was a bare specifier".
This is my first time working with importmap and I love the idea of being able to cut out npm, webpacker, and yarn, but I'm really having a hard time parsing out how all of these files are supposed to work together.
