Problem loading files using importmaps in rails 7

Question

I am working on a rails 7 app that is using importmaps for all JS related stuff. For reference, I am giving the code below.

importmap.rb

# Pin npm packages by running ./bin/importmap

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"

# Jquery related pins
pin "jquery", to: "https://code.jquery.com/jquery-3.6.0.min.js"
pin "jquery-easing", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"
# end jquery related pins

# JS inside app/javascript
pin "sb-admin-2.min"
pin_all_from "app/javascript/demo", under: "demo"
# JS inside app/javascript

# JS inside vendor/javascript
# pin_all_from "vendor/javascript/charts", under: "charts"
pin "charts/Chart.bundle.min"
pin "charts/Chart.min"
# JS inside vendor/javascript

application.js ( app/javasript/application.js)

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

// import jquery and jquery-easing
import "jquery"
import "jquery-easing"
// import jquery and jquery-easing
console.log($)

// import app/javascript 
import "sb-admin-2.min"
import "demo/chart-area-demo"
// import app/javascript 
 
// import vendor/javascript
import "charts/Chart.bundle.min"
import "charts/Chart.min"
// import vendor/javascript

PROBLEM

My problem is when I land on this page, my console.log($) does not show any thing nor give any error in console. Same in the case of my charts. but when I myself refresh the page , it then shows the console.log($) and charts starts working too.

Sounds like it might be a turbo issue. Can you post the relevant code for the page in question? Maybe it is something like this: github.com/ankane/chartkick/issues/608 or this: github.com/ankane/chartkick/issues/625 — engineersmnky
– engineersmnky, Commented Oct 2, 2024 at 14:12

Colin Atkins · Accepted Answer · 2024-10-03 11:15:03Z

Your problem isn't specific to Rails but rather a problem with how you try to import the jQuery code in your application. When you pin a package to the importmap, make sure that the code you're pinning is exporting as module. Here is an example:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <!--
    JSPM Generator Import Map
    Edit URL: https://generator.jspm.io/#U2VhYGBiDs0rySzJSU1hyCosTS2q1E1NLM7MS3cw0DPQM4SKORjrmesZAgDeG2A5LwA
  -->
   <script type="importmap">
  {
    "imports": {
      "jquery": "https://ga.jspm.io/npm:[email protected]/dist/jquery.js",
      "jquery-easing": "https://ga.jspm.io/npm:[email protected]/dist/jquery.easing.1.3.umd.js"
    }
  }
  </script>
  
  <a href="#hello">Click me to scroll</a>
  
  
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  
  
  <a id="hello">Hello!</a>
  
  <!-- ES Module Shims import maps polyfills -->
  <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
  
  <script type="module">
    import $ from 'jquery';
    import 'jquery-easing';
  
  
    // Example usage
    $(document).ready(function() {
        $("a").click(function(event) {
            event.preventDefault();
            $("html, body").animate(
                { scrollTop: $($(this).attr("href")).offset().top },
                800, // duration
                "easeInOutExpo" // easing function
            );
        });
    });
  </script>
</body>
</html>

Change all the import statements to the module import syntax if needed like so:

// import jquery and jquery-easing
import $ from 'jquery';
import 'jquery-easing';

console.log($)

Collectives™ on Stack Overflow

Problem loading files using importmaps in rails 7

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related