I'm having trouble getting Rails 7 importmaps to play nicely with jquery and bulma.
config/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 "bulma", preload: true # @0.9.4
pin "jquery", preload: true # @3.7.0
pin "jquery-ujs", preload: true # @1.2.3
pin "jquery-ui", preload: true # @1.13.2
application.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 bulma
app/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.js
app/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 = jquery
window.$ = jquery
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { 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.
Cleanup
You can just make a new rails app to see the setup I'm trying to bring you back to.
Delete this file
app/assets/javascripts/application.js, can't have twoapplication.js.Already covered by
//= link_tree ../../javascript .js, so don't need these:I don't know why you're copying stimulus initialization, it already happens in
controllersdirectory.We're using Turbo, not turbolinks. No Rails UJS in rails 7, and you really don't want to bring that back in.
Jquery
No need to download, just pin it:
https://stackoverflow.com/a/72290313/207090
Bulma
Bulma is css:
or import (this is a plain css import that browser should take care of):
Importmaps
This ends up in the browser in
<script type="importmap">tag. (see how controllers are already there):This json is what you're building with
pinandpin_all_fromcommands inconfig/importmap.rb. If you don't see something there you can't import it, unless you're using full urls:Same thing for your local files, they have to be mapped, or in rails terms pinned. That process goes through
sprocketsto locate files. But I think I've covered it here:https://stackoverflow.com/a/72855705/207090