Rails7のimportmapでjQuery-UIを使う

つまづいたのでメモ

環境

Docker
Ruby on Rails7

問題

jquery-uiをpinしても、見つかるのはwidget.js

$ ./bin/importmap pin jquery-ui

config/importmap.js

pin "jquery-ui", to: "https://ga.jspm.io/npm:jquery-ui@1.13.2/ui/widget.js"

jquery-ui-distはpinしても見つからない

$ ./bin/importmap pin jquery-ui-dist
Couldn't find any packages in ["jquery-ui-dist"] on jspm

解決方法

直接URLを指定する

config/importmap.js

pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"

参考　https://stackoverflow.com/questions/69691718/how-to-use-jqueryui-in-a-rails-6-or-rails-7-alpha-engine

jQueryは普通にpinできます

config/importmap.js

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"
pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"

読み込んで動かしてみましょう

app/javascript/application.js

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

// うごく
$(async () => {
    await import("jquery-ui-dist")
    $("#hoge").draggable()
});

// うごかない
$(() => {
    import("jquery-ui-dist")
    $("#hoge").draggable()
})

おわり🏆