Rails 7 Jquery Not Working (Uncaught ReferenceError: $ is not defined)

Question

I have a Rails 7 app setup (without Turbo) but with Bootstrap and Jquery. The jquery is showing up in my sources tab under assets, but I'm still getting an error saying "Uncaught ReferenceError: $ is not defined" whenever I try to use jquery.

A sample instance where this error appears is this code, on the $ before document:

  <script>
    $( document ).ready(function() {
        $('.sortable').railsSortable();
    });
  </script>

This error goes away if I add jquery via a CDN on my application.html.erb like this:

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

....however that then starts producing all the weird errors you get when JQuery is present twice.

I have the following in my application.js:

import "controllers"
import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"
import "trix"
import "@rails/actiontext"

//= require jquery-ui
//= require rails_sortable
//= require activestorage
//= require font_awesome5

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

Here's my config/importmap.rb:

pin "application", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "trix"
pin "@rails/actiontext", to: "actiontext.js"

And here is my application.html.erb head section:

 <head>
    ...
    <%= if content_for?(:head) then yield(:head) end %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application" %>
    <%= javascript_importmap_tags %>
    <%= include_gon %>
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>

Can anyone see why this isn't working? I know there's no error in the JQuery script itself (because the error is called on any $), but I can't see why the JQuery that shows in the sources tab isn't being recognized.

kevinluo201 · Accepted Answer · 2022-12-04 04:24:48Z

1

If you only need to use jQuery, change like this

import jquery from "jquery"
window.$ = jquery
window.jQuery = jquery

However, if you want to use jQuery-UI, too You need a workaround by creating a file to include the 3 lines above.

// ./src/jquery.js
import jquery from "jquery"
window.$ = jquery
window.jQuery = jquery

And then in application.js

import "./src/jquery"
import "jquery-ui"

This solution is actually from GoRails :D

https://gorails.com/episodes/how-to-use-jquery-with-esbuild

answered Dec 4, 2022 at 4:24

kevinluo201

1,6732 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Liz Over a year ago

This Go Rails episode is so helpful in understanding, but I still can't get it to work. It now shows a console error saying "The requested module 'jquery' does not provide an export named 'default'" for the import jquery from "jquery" line.

Liz Over a year ago

And now the modals don't work either. :(

Pedro Schmitt Over a year ago

I also needed to remove the defer: true on the javascript_include_tag at the layout - it was making the $ be called before jQuery was loaded.

Collectives™ on Stack Overflow

Rails 7 Jquery Not Working (Uncaught ReferenceError: $ is not defined)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related