Webpackerのエラーで確認すること

1) Webpackerがインストールされているか

確認方法としてはbundler installが通るかで確認できます。
インストールされていなければ以下が表示されます。

ターミナル(EC2)

# ローカルでは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内にインストールします。

これについは何言っているかさっぱりという方もいると思うので（主に自分(笑)）、公式のドキュメントを参考にしてみてください。

yarn installの解説（公式ドキュメント）

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による手動デプロイ・アセットコンパイル