【Rails】JSのキャッシュを削除する方法

Question

現在、RailsアプリにJSを使用しているのですが、JSが実行されずに困っております。

具体的には、現状このようにJSのコードを書いております。

// app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require jquery
//= require jquery_ujs

console.log("hoge");

document.getElementById("eagle").onclick = function() {
    console.log("hoge");
};

ですが、ブラウザ上には以前記述していたJQueryのコードに対して、エラーを出しています。
($は定義されていないと言っているかと思います)
JQueryは読み込んでいないので、エラーを出すのは当然かと思うのですが、
変更が反映されていないようです。

// ブラウザ上で見えるソース(エラーを出している箇所)
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require jquery
//= require jquery_ujs
console.log("hoge");


$('#eagle').click(function() {
    console.log('クリックされました！');
})

ブラウザのキャッシュ の削除、railsサーバーの再起動、別のブラウザで表示をしてみましたが、どれも改善しませんでした。
application.js意外では、ajaxにより非同期で画面を更新する機能があり、JS自体は動いております。

railsアプリ内に消すべきキャッシュがあるのでしょうか。

Comments

[m.ts10806]

Javascriptはエラーを感知したらそこで終了します。jQuery本体読み込ませてからでないと話は進まないのでは

[hurousyotoku500]

今回はjQueryを使用したいわけではなく、生JSを読み込ませ、変更を反映させたいだけです。

[m.ts10806]

読み込ませたところでjQuery参照のエラーが出ていれば使えない（反映確認できない）ということです。

[hurousyotoku500]

実際記述しているコードにJQueryは書いていないので、正常に読み込めていれば、今回のエラーは出ないはずです。

[m.ts10806]

提示されているコードはjQueryも書かれてます。

[hurousyotoku500]

それは、ブラウザ上で見えるソースですね。

[m.ts10806]

あとは、修正後にきちんとコンパイルしているかどうか。キャッシュクリアはコンパイルできている前提です。
いずれにしても「jQueryを読み込ませるとどうなるか」は確認すべき項目。

Answer 1

もしかして、「application.jsの変更後にプリコンパイルを実行していない」ということはないでしょうか？

なお、ローカル開発ではプリコンパイルを都度行わずに済むようにwebpack-dev-serverを常駐させるのが一般的です。

Comments

[hurousyotoku500]

ありがとうございます。プリコンパイルというのはよく理解出来ていませんが、webpack-dev-serverなるものを導入してみます。

[hurousyotoku500]

webpack-dev-serverですが、導入方法について色々調べてみましたが、webpackerばかり出てきてよく分かりませんでした。分かりやすい記事等、ご存知でしょうか？

Answer 2

application.jsの22行目あたりでjQueryを参照して見つからないというエラーですね
application.jsを使うならjQueryを読み込み
jQueryを使いたくないならapplication.jsも諦めて下さい

Comments

[hurousyotoku500]

application.jsはJQueryを読み込まないとつかえないのですか？
>>application.jsの22行目あたりでjQueryを参照して
これは上記の質問分に書いてある通り、ブラウザ場で見えるソースで実際はこの記述は消してあります。なので、キャッシュが残っているのではと思って質問しています。
console.log("hoge")は問題なく実行できていますが、これはJQueryではないですよね？

[yambejp]

キャッシュが残っているかどうかはconsole.log("hoge")を
console.log("fuga")にして確認して下さい

[yambejp]

あとはjs呼び出して適当なパラメータをつけて読んでみてはどうでしょう？
applocation.js?nocache=20210125104700