本番環境(HEROKU)で Uncaught TypeError・・・

はじめに

Ruby on Railsで作成中の個人アプリに修正を加え、Herokuにデプロイしたところ、
検証ツールに"Uncaught TypeError:\$(...) is not a function"
というエラー文が・・・
解決方法を書き留めておきたいと思います。

ローカルでは全く問題なかったのに！

エラーがないかしっかりと確認してからデプロイを行なったのに・・・
と初心者の私はかなり焦りました。

まずは落ち着いて、エラー文をGoogle翻訳してみる。
\$(...) is not a function” →　”\$(...)は関数ではありません。”

・・・よくわからないけど ”\$(...)” はjQueryかな？
という事はjQueryがうまく読み込めてないのかも？

jQuery＆エラー文で色々検索してみる

すると今回の原因が判明しました。
・・・jQueryを読み込む記述を書いていなかった！

htmlのhead部分に
jQueryを読み込む記述を書いていなかった事が原因でした。

application.html.haml(変更前)

  %head
    (省略)
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'

下記の記事を参考に、jQueryを読み込む記述を追加し、
再度Herokuにデプロイしたところ、エラーが解消しました。
jQueryも問題なく動いてくれていました。
参考：railsでjQuery/JavaScriptがうまく動かない時の対処法

application.html.haml(変更後)

  %head
    (省略)
    = stylesheet_link_tag    'application', media: 'all'
    %script{src: "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"} 
    = javascript_include_tag 'application'

参考記事に記載されているように、jQueryを読み込む記述は
jQuery読み込み→スクリプト読み込みとなるようにしてください。

まとめ

本当に初歩的なところで躓いてしまいました.
また、なぜローカルでは問題なかったのかという疑問は調べても解決できず・・・
(ご存知の方がいらっしゃいましたらぜひ教えてください！）

引き続き、頑張っていきたいと思います！