【Rails】リロードをしないとJavaScript (jQuery)が動作しない

今回はスクールでも頻発している
”リロードしないとjQueryが動かない問題”について記事にしていこうと思います。
かくいう私も見事この沼にハマり、かなり悩まされました、、、

開発環境

Rails 6.1.4
ruby 2.6.3

目次

• 原因
• 対処法
• 対処法（番外編）

原因

私の場合、FontAwesome導入時にjQueryのコードを追記していたのですが、
なぜかそれが削除されており、jQueryが作動しないという状況でした。

対処法

下記のコードを追記します。

config/webpack/environment.js

const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)

app/javascript/packs/application.js

# import "popper.js";の上などに追記
import "jquery";

私はこれで無事動作するようになりました。

対処法

調べていく中で、Turbolinksを無効にする、という方法も見つけました。

ただ、Turbolinksは画面遷移を高速化してくれる役割があります。
RailsではGemによって管理され、デフォルトで入っています。

Gemfile

gem 'turbolinks', '~> 5'

Turbolinksが原因なら削除すればいいじゃん！と思うかもしれませんが、
上記した方法で正常に稼働する場合は、この方法は取らないほうがいいです。

今回もご覧いただきありがとうございます。
あくまで備忘録なので足りない説明等多々あるかと思います。
行き詰まった際の助けになれば幸いです。