How can I install jQuery in Rails 7 with importmap?-CodePudding

I have a new Rails 7 application. I'm currently trying to learn all the new features since Rails 5. I want to use the following code in my javascript file, but so far I'm getting the following error: Uncaught ReferenceError: $ is not defined.

$(document).on("turbo:load", () => {
  console.log("turbo!");
});

Here are two other relevant files. If I need to post anything else please let me know.

importmap.rb

pin "application", preload: true
pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js", 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 "el-transition", to: "https://ga.jspm.io/npm:[email protected]/index.js"

pin_all_from "app/javascript/controllers", under: "controllers"

application.js

import "@hotwired/turbo-rails"
import "jquery"

$(document).on("turbo:load", () => {
  console.log("turbo!");
});

CodePudding user response：

When using jspm jQuery has to be explicitly imported:

// app/javascript/application.js

import jQuery from "jquery";

// NOTE: make jQuery global if needed
window.$ = window.jQuery = jQuery;

console.log($); // ok

Another way is to switch to CDN other than jspm:

# config/importmap.rb

# NOTE: pin jquery to jsdelivr instead of jspm
pin "jquery", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"

// app/javascript/application.js

import "jquery";
console.log($); // ok

CodePudding user response：

I needed to add a few lines to my application.js file.

import "@hotwired/turbo-rails"
import jquery from "jquery"
window.jQuery = jquery
window.$ = jquery