Rails 7 importmap jquery error $ undefined

Question

./bin/importmap pin jquery

pinned jquery using this command

In application.js file

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

added these lines

but in my view file I am getting $ undefined

<script>  
  $(document).ready(function() {
    $("#user_primary_email").focusout(function(){
      $("#user_email").val($(this).val());
    });
  });
</script>

Ajith · Accepted Answer · 2022-08-22 11:22:12Z

4

In my script tag I added type="module"

<script type="module">  
  $(document).ready(function() {
    $("#user_primary_email").focusout(function(){
      $("#user_email").val($(this).val());
    });
  });
</script>

And now it is working, I don't know why?

answered Aug 22, 2022 at 11:22

Ajith

1036 bronze badges

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

Comments

Timothy Alexis Vass · Accepted Answer · 2023-07-20 09:05:03Z

2

For future visitors...

Here is how you solve this:

Pin jquery
bin/importmap pin jquery
Use jsdelivr.net or local file in importmap.rb
jspm won't work for some unknown reason

a) pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery/dist/jquery.js"

b) pin "jquery", to: "jquery.js"
if you use a local file, you need to download jquery.js to app/javascript/jquery.js

You can also pin to a specific version if you want that
c) pin "jquery", to: "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"
In application.js file you only need to add this
import "jquery"
When you want to use jquery in a view, you need use type="module" on the script tag

<script type="module">

 $(document).ready(function(){
   console.log($)
 })
</script>

answered Jul 20, 2023 at 9:05

Timothy Alexis Vass

2,7672 gold badges13 silver badges32 bronze badges

2 Comments

legoblocks Over a year ago

Why is type="module" required?

Timothy Alexis Vass Over a year ago

The script type="module" attribute is required for using jQuery with importmaps because importmaps are a way to load and manage JavaScript modules.

Collectives™ on Stack Overflow

Rails 7 importmap jquery error $ undefined

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related