ミナミ(@minami_nakasato)です。
エラーに苦しんだので記録します。
エラー内容
アプリ開発中、「hoge.js」ファイルを用意し、その中で関数を定義。
そして「application.js」で読み込む。
しかし、関数が動かないエラーが発生。
javascriptのエラーとしてはポピュラーな
「Uncaught TypeError: オブジェクト.メソッド名 is not a function」
「Uncaught TypeError: Cannot read property ‘プロパティ名’ of undefined」
の登場だ。
step１
「hoge.js」ファイル内に
console.log("fuga");
を記述し、chrome検証ツールのconsoleタブで確認。
ちゃんと「fuga」が表示されている。
という事はjsファイル自体は読み込まれている。
該当の関数だけが読み込まれない状況のようだ。
step２
引き続き、検証ツールで
Sourcesタブ → Pageタブ
をクリック。
読み込まれているファイルの一覧が表示されるので、問題のjsファイルAを確認。
すると、
ファイル名はAなのに、読み込まれた時点では中身のコードが全く関係ないファイルBの内容になっている。
そのため適切な関数が読み込まれずに今回のエラーになった。
「パッケージは日清カップヌードルなのに、中身はぺヤングカップ焼きそばでビックリ」
という状態だ。
こんなエラー初めて見た。
step3
日清カップヌードルの中身を追い出しコッソリ侵入した強盗ぺヤングこと「ファイルB」で検索をかけてみた。
$ git grep [ファイルB]
当然、該当のファイルはヒットした。
しかしエラーの原因を突き止める手がかりは無し。
step4
「プレーンなgrepコマンドを使って、git管理下にないファイルも検索してみよう」
$ grep -r [ファイルB]
「-r」オプションで再帰的に処理。
すると
「tmp/cache/assets/sprockets/v3.0/~hoge~.cache」
なるファイルがヒット。こいつの仕業か。。?
step5
不要なログファイル、一時ファイルは削除するに限る
(汚物は消毒だ！)
以下のコマンドを実行した。
rails cache:clear
それから
rails tmp:clear
も実行。
すると無事に解決！
ファイル名も中身もAの内容が反映され、無事にjsの関数を動かす事ができました。
※ブラウザのキャッシュクリアも試す価値あり。
chromeであれば
設定 > プライバシーとセキュリティ > 閲覧履歴データの削除 > キャッシュされた画像とファイル （他はチェックしない）
※また、シークレットモードではうまく動作しないかも確認する
教訓
①検索時に「git grep」だけやるクセがあったが、git管理下にないファイルがエラーの原因になることもあるので、「grep」での検索も怠らない
②tmpファイルがエラーの温床になる例があると分かった。
今後は定期的に削除する。意味不明なエラー発生時は、それらに原因がないか疑う。
======================================
ミナミ(@minami_nakasato)です。都内のベンチャー企業でwebデザイン／プログラミング／動画撮影や編集などをやっています。