何度キャッシュクリアしてもJavaScriptが更新されなかった問題

JavaScriptを更新したのにローカル環境で更新ファイルが読み込まなかった問題

JavaScriptファイルを書き換えてローカル環境で確認した時にchromeのディベロッパーツールを確認したが、読み込まれませんでした。
Ctrl+F5などでキャッシュクリアしたり、rails のキャッシュをrails tmp:cache:clearでクリアしたのちにサーバーを起動しなおしても解決しなかったときの対処法が見つからなかったので、メモしておきます。

解決方法

1. Webpackerの再ビルド

JavaScriptファイルがWebpackerで管理されている場合、Webpackerを再ビルドして新しいファイルを生成すると治る場合がある。
ターミナルでプロジェクトのルートディレクトリから bin/webpack コマンドを実行する。これにより、application.js ファイルが再ビルドされるはず。

上記のコマンドを試したところ、下記のエラーが発生していた。

/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:93
                                throw err;
                                ^

Error: Cannot find module '../task-status-change'
Require stack:
- /home/user/projects/bymyself_app/node_modules/webpack/lib/webpack.js
- /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/validate-options.js
- /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/convert-argv.js
- /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js
- /home/user/projects/bymyself_app/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:931:15)
    at Function.Module._load (internal/modules/cjs/loader.js:774:27)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/user/projects/bymyself_app/node_modules/webpack/lib/webpack.js:207:1)
    at Module._compile (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32)
    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/validate-options.js:2:24)
    at Module._compile (/home/user/projects/bymyself_app/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32)
    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (internal/modules/cjs/helpers.js:107:18)
    at /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:71:14
    at Object.parse (/home/user/projects/bymyself_app/node_modules/yargs/yargs.js:576:18)
    at /home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1114:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/user/projects/bymyself_app/node_modules/webpack/lib/webpack.js',
    '/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/validate-options.js',
    '/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/utils/convert-argv.js',
    '/home/user/projects/bymyself_app/node_modules/webpack-cli/bin/cli.js',
    '/home/user/projects/bymyself_app/node_modules/webpack/bin/webpack.js'
  ]
}

モジュールが見つからないというエラーが発生していた。
Error: Cannot find module '../task-status-change'
これは、application.jsでrequireしているファイル名を変更しているが、反映されていないため発生していると思っていたが…。

なぜ更新されないのか、悩んだ末に、パッケージの依存関係が問題を起こしている可能性があるということが判明。

2.　依存関係の再インストール

nmp install
yarn install
を実行

nmp installの実行結果▼

   ╭───────────────────────────────────────────────────────────────╮
   │                                                               │
   │      New major version of npm available! 6.14.18 → 9.8.1      │
   │   Changelog: https://github.com/npm/cli/releases/tag/v9.8.1   │
   │               Run npm install -g npm to update!               │
   │                                                               │
   ╰───────────────────────────────────────────────────────────────╯

yarn installの実行結果▼

success Already up-to-date.

npmの依存関係が問題だったよう。

3.webpackerの再々ビルド

bin/ewbpackを再度実行

エラーなく実行完了。

再度サーバーを起動してローカル環境で変更が反映されているか、確認したところ問題は解決されていた！！

半日溶かしたので、自分用にメモと他の誰かのためになれば…

以上JavaScriptが更新されないときの対処法第二弾でした。