12時間ハマってます。。。本番環境で読み込めるjQueryが、ローカル環境では読み込めない。”＄ is not defined”

前提・実現したいこと

ある日、ローカル環境から本番環境にFTPでファイルをアップロードしました。操作ミスがあったせいか、その後、ローカル環境の方にエラーがでました。エラーとは以下です。
・jQueryの”＄”が読み込めなくなり、「＄ is not defined」というエラー文が出る。

このエラーを取り、jQueryを今まで通り動くようにしたいです。

エディターでデバックした時のエラーメッセージ

/usr/local/bin/node --inspect-brk=43550 public/js/question_per_category.js 
Debugger listening on ws://127.0.0.1:43550/a744d77d-ba23-4194-a93e-8d364aae2358
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
/Users/***/Desktop/hoge2/public/js/question_per_category.js:6
$(function(){
^

ReferenceError: $ is not defined
    at Object.<anonymous> (/Users/***/Desktop/hoge2/public/js/question_per_category.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:775:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

該当のソースコード　

↓呼び出し側(hoge.blade.php)

php
1//上部省略
2//jQuery取得
3 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
4
5 <script type="text/javascript"src="../../js/question_per_category.js"></script>
6

↓使いたいjQuery　ここの”＄”で、「$ is not defined」が発生している。

js
1//jQuery
2$(function(){
3    $('#categoryLatest').click(function dojQueryAjax() { 
4        $.ajax({
5            url:'selectedCategoryLatest',
6            type:'GET',
7        }).done(function(data){
8            $(".selected_category_detail").load("selectedCategoryLatest #sample");
9        }).fail(function(data){
10            alert('サーバーエラー。現在原因解明中です。復旧までしばらくお待ちください。');
11        });
12    });
13});
14

試したこと

代表的な？解決方法はネットで調べて試しました。試したこと↓

・layouts/appのapp.blade.phpにて、”defer”を消す。→読み込み順序対策　参考サイトhttps://qiita.com/96kuroguro/items/aad383a129c3523f2ea1

・phpの”＄”と競合を避けるため、jQuery.noConflict();を挿入。

・phpの”＄”と競合を避けるため、$(function(){...})をjQuery(function(){...})に変更。

・サーバーに上がっているLaravelは期待通りjQueryが読み込めている状態なので、それをローカルに持ってきて、実行する。

以上、全てを試しましたがエラーはなくなりませんでした。

補足情報（FW/ツールのバージョンなど）

PHP 7.3.11
Laravel Framework 6.6.2

Laravelの何か重要なファイルを削除してしまったのかと思いましたが、本番に上がっている同様のソースコードにもかかわらず、ローカル環境ではjQueryが読み込めないんですよね。

一体、何がおかしいのでしょうか。。。ご教授お願いします????

退会済みユーザー

2020/04/08 01:20

ブラウザが受けた html ソースを見ましたか？ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> と、 //jQuery $(function(){ ... の順序が逆とか、実は前者のコードがないとかいうことはありませんか？

Harumaki_i

2020/04/08 01:53

回答ありがとうございます！順番はきちんとCDN読み込みが先で、その後にjQueryの処理がきておりました????

退会済みユーザー

2020/04/08 02:21

例えば Chrome で問題のページを表示し、画面を右クリックして出てくるダイアログで「ページのソースを表示」をクリックして出てくるソースをチェックされた結果なのでしょうか？　そうだとして、そのソース画面で、問題の script 要素の src 属性に設定されている url の文字列をクリックすると、その url の jQuery のソースは表示されるはずですが、そうなるでしょうか？

Harumaki_i

2020/04/08 02:34

確認してみました！safariですが、Webインスペクタにて、読み込んだurlの文字列を押下すると、読み込まれたjsコード確認できました。????

退会済みユーザー

2020/04/08 02:50 編集

ブラウザのキャッシュをすべて消去してから、Fiddler などのキャプチャツールを使って要求・応答をキャプチャして、すべての外部スクリプトファイルが期待通りダウンロードされているか調べてはいかがですか？ところで、開発環境では問題なくて、運用環境だけの問題ということですよね？　そして、アプリのコードはどちらも全く同じで、運用環境には何かのファイルをアップし忘れているということはないですよね。そこを確認して教えてください。

退会済みユーザー

2020/04/08 07:30

上のコメントで、 > 開発環境では問題なくて、運用環境だけの問題ということですよね？と書きましたが間違いでした。失礼しました。ローカル環境＝開発環境で、開発環境から運用環境に FTP でファイルをアップしたときに、何らかの問題で開発環境で質問に書いてある問題が出たということですね。であれば、環境すべては手元にあるはずなので、原因はすぐ特定できると思うのですが。自分のおすすめは、問題を再現するのに不要なコードをどんどん削って切り分けを行うことです。検討ください。

Harumaki_i

2020/04/08 19:31

ありがとうございます！！なるほど。。。やってみます！

行動規範の内容に同意します

回答2件

自己解決

自己解決できました。なんとローカルのDBサーバーが停止していたが故のエラーでした。
DBサーバー停止している→WebサーバーからはAjaxでDB参照していた→Ajaxのところでエラー→エラー文章が（的外れで）”＄ is not defined"→jQueryの＄がPHPの＄とコンフリクトか？→違う→なんだ？なんだ？なんなんだー？！？！

→DBサーバーが停止していただけ。

冷静に考えたら、本番とローカル環境の違いって、DBサーバーくらいしか違いがない程度のシステムなんで、簡単にヒントに結びつくはずでした。教訓は、「状況を整理しろ！」です。

投稿2020/04/08 23:18

Harumaki_i

総合スコア8