問題タブ [import-maps]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - Rails 7 Semantic-UI jQuery "Uncaught ReferenceError" Importmaps を使用
問題の概要
importmap-railsgem を使用して javascript フロントエンド ライブラリを管理する新しい Rails 7 アプリケーションがあります。
Semantic-UI ライブラリを使用しようとしていますが、jQuery の依存関係が Semantic-UI JavaScript によって認識されません。
importmap を介してセマンティック UI ライブラリをピン留めできなかったため、このライブラリをimportmap.rb手動で追加しました。これは私が使用しているsemantic.min.jsのcdnへのリンクです。
次のエラー メッセージが Chrome Web ツールのコンソールに表示され、javascript を検証するページにある折りたたみ可能なアコーディオンが機能していません。
で参照されている行はsemantic.min.js次のようになります
試みられた修正
Semantic-UI と jQuery のインポートが行われた順序が問題になる可能性があると考えました (他の多くのStack Overflow の質問とGithub の問題による)。
ただし、Semantic-UI インポートの前に jQuery インポートが発生しています。
Semantic-UI のインポートをコメントアウトすると、問題なく jQuery を使用できます。
preloadファイルの変数を切り替えて、importmap.rb Semantic-UI の読み込みが速すぎるかどうかを確認しました。
$jQueryインポートの名前をandに変更しようとしましjQueryたが、どちらも認識されません。
私の直感では、jQuery がグローバル変数として設定される前にセマンティック UI が読み込まれますが、それが新しい importmap 機能とアセット パイプラインでどのように機能するかはわかりません。
アプリケーション構成
Importmap.rb
アプリケーション.js
index.html.erb 折りたたみ可能なアコーディオン
ジェムファイル