【解決】Rails6 + jQuery | Uncaught ReferenceError: $ is not defined

3469 ワード
jQuery Rails6 非同期処理 JavaScript JavaScript テキストリンク

Rails6でjqueryを使って個人開発中Uncaught ReferenceError: $ is not definedとか言うエラーが出た。色んな記事で書いてあったrequire("jquery")とかwindow.$ = $;を試してみたがダメ。結果的に海外の変な記事を参考に解決できたのでメモ。

前提

  • Railsのバージョンが６
    • Railsバージョン5は対象外
  • JQueryは導入済み

結論

app/javascript/packs/application.jsに以下を追加

app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// ここから追加
var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;
// ここまで

参考にしたサイト
https://qiita.com/takuma_0625/items/adfee3a2305500c6d3a8
https://rubyyagi.com/how-to-use-bootstrap-and-jquery-in-rails-6-with-webpacker/

Rails
jQuery