1

I am upgrading an old project to Rails 7 with importmaps, and I am having trouble understanding how it's supposed to work now. I have some old JavaScript that relies on jQuery and jquery-ui. I've set it up to import jquery and jquery-ui, but the jQuery variable is not recognized in the jquery-ui module.

importmap.rb:

pin "application", preload: true
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.3/dist/jquery.js", preload: true
pin "jquery-ui", to: "https://ga.jspm.io/npm:jquery-ui@1.13.2/ui/widget.js", preload: true

application.js:

import "jquery";
import "jquery-ui";

Here is the error I get:

Uncaught ReferenceError: jQuery is not defined at widget.js? [sm]:20:11

What am I missing?

Fred Willmore
  • 4,386
  • 1
  • 27
  • 36
  • Looks to me like you should either not `preload` application, or you should put application in the end, so jquery is loaded before application.js – Gijs P Jan 21 '23 at 21:06

1 Answers1

2

To resolve this issue I had to pin jquery using a different CDN:

pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.js"

I'm still struggling to figure out why the different CDNs would deliver a fundamentally different version of jquery with the same version number, but I'm sure it must be my limited understanding of this process. Thanks to user @Alex for this answer:

How can I install jQuery in Rails 7 with importmap?

Fred Willmore
  • 4,386
  • 1
  • 27
  • 36