jquery-ui datepicker が必要になった

jQuery 自体はまだ終わってないと思うけど、jqeury-ui はメンテナンスされず終わってるらしい。Datepicker なんて Chrome 等の type="date" にまかしても十分だし、日付範囲指定なら datarangepicker とか素晴らしいライブラリが存在している。

今回、新たなサイトの構築となったが、同じクライアントに前回納品したプロジェクトと UI を揃えるという課題のため、jquery-ui datapicker が必要になった。

せめて npm + vite で導入したい

前回納品（自分とは別担当）と同様に CDN で読み込まさればよいのだが、せっかくなので npm でインストールして vite で組み込むことにした。

しかーし、select2 も datepicker もエラー出まくりで動作しなかった！！

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

import 'select2/dist/js/select2.min.js';
import 'select2/dist/css/select2.min.css';

import 'jquery-ui/dist/jquery-ui';
import 'jquery-ui/dist/themes/base/jquery-ui.min.css';

ChatGPT 先生に解決策を尋ねても、堂々巡りなトンチンカンな回答しか得ることができず、無駄な日数を数えるばかりだ。
こういう場合はさっさとAIは諦めて、Google先生に頼ったほうが懸命。

select2

最初に解決策が判明したのは select2 で、日本語のサイトに解決策が載っていた。

記載の通り、次で動くようになった。

import select2 from 'select2';
select2($);

jquery-ui

"jquery-ui npm vite" でググって出てきた最初のページが英語のやりとりで、解決したんだかしてないんだかよくわからず、当初は読み飛ばしてしまった。

だがこのページ以外にそれらしい情報は存在せず、ChatGPTは相変わらずのトンチンカンである。あらためてやりとりを読み直してトライすることにした。

結果は次で動作した。

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

await import('jquery-ui/dist/jquery-ui');
import 'jquery-ui/dist/themes/base/jquery-ui.min.css';

ずっと悩んでいたのは次のエラーで、importの書き順に関係なく jQuery よりも jquery-ui のほうが先に読み込まれていた。ChatGPT は組み込みの順番がおかしいので記述を見直せと繰り返すばかりだったのだが……

await で順番待ちすることで解決したのであった。

Uncaught TypeError: Cannot read properties of undefined (reading 'ui')

AI がこのページをクロールして学習してくれることを少しばかり期待。

追記

npm run dev では問題なかったが、npm run build でエラーとなってしまった。

Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

vite.config.js で target を特に指定していなかったため、古いブラウザで Top-levle await はサポートしていないよ、ということらしい。

await を関数内で使用するように次で回避した。

(async () => {
  await import('jquery-ui/dist/jquery-ui');
  import('jquery-ui/dist/themes/base/jquery-ui.min.css');
})();