Webpackerのエラーで確認すること
1) Webpackerがインストールされているか
確認方法としてはbundler installが通るかで確認できます。
インストールされていなければ以下が表示されます。
# ローカルではbundle installコマンド
[ec2-user@ip-XXX-XX-XX-XXX リポジトリ名]$ bundler install
...
run bundle exec spring binstub --all
* bin/rake: Spring inserted
* bin/rails: Spring inserted
rails :install
Yarn not installed.
Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
https://yarnpkg.com/ja/docs/install
解決方法としてはインストールしてあげればOK
~ $ rails webpacker:install
結果が以下のように出たらyarnがインストールされていないので次の項目を実行します。
$ rails webpacker:install
# 「yarn がインストールされていない」と怒られている
Yarn not installed.
Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
2)yarnがインストールされているか
まずは確認してみましょう。
$ yarn -v
Command 'yarn' not found, but can be installed with:
sudo apt install cmdtest
正しくバージョンが出力されたらインストールされていますが、上記のような場合はインストールしてあげましょう。
yarnのインストールはOSごとに違うので公式のドキュメントを参考にしてみてください。
# mac の場合
$ brew install yarn
インストールができたらyarn -vでバージョンを確認しましょう。
正しくインストールができていたら、最後にyarn installを実行します。
$ yarn install
yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 3.36s.
3)node_modules がインストールされているか
yaranがインストールされている環境でrails6のアプリをgit cloneしたときなどに起こります。
$ rails s # または、rails db:migrate など
error Couldn't find an integrity file
error Found 1 errors.
========================================
Your Yarn packages are out of date!
Please run `yarn install --check-files` to update.
========================================
To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).
解決方法としてはyarn installを実行して、package.jsonにリスト化されているすべての依存関係をnode_modules内にインストールします。
これについは何言っているかさっぱりという方もいると思うので（主に自分(笑)）、公式のドキュメントを参考にしてみてください。
4) パッケージのバージョンが一致しているか
これはrails newで作成したRails6アプリで起きるみたいです。
$ yarn install
...
# ----------
$ rails s
...
========================================
Your Yarn packages are out of date!
Please run `yarn install --check-files` to update.
========================================
To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).
yarn check v1.6.0
success Folder in sync.
Done in 0.10s.
yarn check v1.6.0
error "webpack-dev-server#yargs#cliui" is wrong version: expected "^4.0.0", got "5.0.0"
error "webpack-dev-server#yargs#yargs-parser" is wrong version: expected "^11.1.1", got "13.1.1"
error Found 2 errors.
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.
解決方法としては、まずメッセージに従ってコマンドを実行しましょう。
$ yarn install --check-files
$ yarn install
$ yarn upgrade
これで解決しない場合はyarn upgradeを実行してみると解決することがあるようです。
# mac の場合
$ brew upgrade yarn
==> Upgrading 1 outdated package:
yarn 1.6.0 -> 1.17.3
==> Upgrading yarn
...
# ----------
$ yarn upgrade
yarn upgrade v1.17.3
[1/4] 🔍 Resolving packages...
warning @rails/webpacker > postcss-preset-env > postcss-color-functional-notation > postcss-values-parser > flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > webpack-dev-server@3.8.0" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.0" has unmet peer dependency "webpack@^4.0.0".
[4/4] 🔨 Rebuilding all packages...
success Saved lockfile.
success Saved 673 new dependencies.
info Direct dependencies
...
✨ Done in 42.59s.
# ----------
$ rails s
# => エラー解決
ということでWebpacker周りのエラーについてでした。
この辺は自分も全然わからないので、とりあえずまとめるだけでもしてみました。
参考になれば幸いです。
参考文献
【Rails6】Webpacker::Manifest::MissingEntryErrorが出たときの対処法
Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法
EC2にDockerを組み込んでいる人は参考になるかも?
EC2 ✕ Docker・docker-composeによる手動デプロイ・アセットコンパイル