【Rails 6 + Webpacker】M1/M2 Mac で発生したエラーの解決法
初めまして。
子育て中の現役看護師で、エンジニア転職を目指してRuby on Railsを勉強しています。
アウトプットのために、Rails6 + Webpackerのセットアップ時に陥ったエラーとその解決方法をまとめました。
現在の学習で使用しているMacBookがM1チップなのですが、M1/M2Macでは、Node.jsのバージョンや、Webpackerの設定でエラーが発生しやすいと色々な記事を参照し、知りました。
（勉強用に安く中古で買えるものが、たまたまM1チップのMacだったのです。）
※初学者のため、間違えていたらすいません。
発生したエラー
Rails 6 + Webpacker のセットアップ時に、以下のようなエラーが発生しました。
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.
========================================
error blog_app@0.1.0: The engine "node" is incompatible with this module. Expected version "14.x". Got "18.x"
error Found incompatible module.
zsh:1: command not found: nvm
Downloading and installing node v14.21.3...
curl: (56) The requested URL returned error: 404
解決までの流れ
✅ nvm の確認 & 設定
✅ Node.js を 14.x に切り替え
✅ Yarn の再インストール
✅ Webpacker のリセット
✅ Rails サーバーの起動
1. nvm がインストールされているか確認
まず、nvm がインストールされているか確認します。
nvm --version
バージョン (0.40.1 など) が表示されれば OK
command not found: nvm と出た場合は nvm をインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.zshrc
その後、再度 nvm --version で確認
2. Node.js 14.x をインストール
M1/M2 Mac では nvm install 14 だけではエラーになることがあるため、
x86_64 (Intel) バージョンを明示的にインストールします。
nvm install 14
nvm use 14
バージョンを確認:
node -v
v14.x.x が表示されていれば OK
3. Node.js 14.x をデフォルトに設定
毎回 nvm use 14 を実行するのが面倒なので、デフォルトを 14 に設定
nvm alias default 14
4. Yarn の再インストール
次に、Yarn のパッケージをリセット
yarn install --check-files
もしエラーが出る場合は、以下を試します。
rm -rf node_modules
rm -f yarn.lock
yarn install
5. Webpacker のリセット & 再インストール
Webpacker のキャッシュを削除し、再インストール
rails webpacker:clobber
rails webpacker:install
6. Rails サーバーの起動
最後に、Rails サーバーを起動して動作を確認
rails s
✅ http://localhost:3000 にアクセスできれば成功
まとめ
| 項目 | コマンド |
|---|---|
| nvm の確認 | nvm --version |
| nvm のインストール | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh |
| Node.js 14.x のインストール | nvm install 14 && nvm use 14 |
| Node.js のバージョン確認 | node -v |
| Node.js 14.x をデフォルトに設定 | nvm alias default 14 |
| Yarn のエラー修正 | yarn install --check-files |
| Webpacker のリセット | rails webpacker:clobber && rails webpacker:install |
| Rails サーバー起動 | rails s |
学んだこと
M1/M2のMacでは、Node.js のバージョン管理 (nvm) や Webpacker の設定に問題が発生しやすいらしいです。
初学者なので、エラーになると、本当に本当に焦ります。
引き続き、学習を続けて行きます。