3

I'm receiving odd behavior while using importmaps. I can access jquery within the scope of the application.js file and through js files that I import. But I cannot access jquery in normal rails views with script tags. In certain cases, I must use a script tag to interpolate certain env variables. I don't know what causes jquery to only run in js files not be accessible in my views. How do I enable jquery across the entire application (within views and js files)

views/**

   Uncaught ReferenceError: $ is not defined
            at edit:687:3
    <script>
       console.log($)
    </script>

config/manifest.js

//= link_tree ../../../vendor/javascript .js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../builds

application.js

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import 'jquery';
import Alpine from "alpinejs";
import { Turbo } from "@hotwired/turbo-rails"
import './vendor/jquery.validate.min';
window.jQuery = $;
window.$ = $;
window.Alpine = Alpine
Alpine.start()
Turbo.session.drive = false
import "@hotwired/turbo-rails"
import "controllers"
import "./navbar"
import "./stripe_resources"
import "alpine-turbo-drive-adapter"

importmap.rb

# Pin npm packages by running ./bin/importmap

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 "jquery", to: "https://code.jquery.com/jquery-3.6.0.min.js", preload: true
pin "alpinejs", to: "https://ga.jspm.io/npm:alpinejs@3.9.1/dist/module.esm.js"
pin "alpine-turbo-drive-adapter", to: "https://ga.jspm.io/npm:alpine-turbo-drive-adapter@2.0.0/dist/alpine-turbo-drive-adapter.esm.js"
pin "stripe_account_jq_validation"
valcod3r
  • 321
  • 4
  • 14
  • 1
    Ended up adding a separate javascript_include_tag "jquery" to the head section, over the javascript_importmap_tags. – valcod3r Apr 01 '22 at 20:50
  • I tried what valcod3r said and it worked for me too. I would like to see this solved using purely importmaps and not having to have 1 off scripts on the page. – thedayisntgray Apr 17 '22 at 00:48
  • I solved this by creating another js file and importing jquery and adding it to window in there. This file needs to be imported in your application. That works because all imports will run before any code is executed, but if the code is in another file that is being imported, then it will run before the other imports. – artur.prado Apr 30 '22 at 13:51
  • Maybe this could be helpful, shameless plug: https://stackoverflow.com/questions/69691718/how-to-use-jqueryui-in-a-rails-6-or-rails-7-alpha-engine/72150447#72150447 – Alex May 15 '22 at 04:17
  • Rails 7 and importmaps is a step backwards... Hours lost trying to get it to work. Thank you for the `javascript_include_tag` hack to DRY this up. – prodigerati Oct 23 '22 at 19:11

0 Answers0