概要
bin/webpackを実行するとerror Command "webpack" not found.で怒られる。
> bin/webpack
yarn run v1.15.2
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
tl;dr
error compression-webpack-plugin@2.0.0: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.1.0"
error Found incompatible module
上記のようなエラーがwebpacker::installコマンドで出ている場合は使用しているnodeのバージョンが対象外なので、エラーに記載されている、
6.9.0以上7.0.0未満
もしくは8.9.0以上
の中に収まるバージョンのnodeをインストールしてもう一度rails webpacker:installを実行する。
前提
環境
> ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]
> rails -v
Rails 5.2.3
> node -v
v8.1.0
> yarn -v
1.15.2
インストール手順
Gemfile
gem "webpacker", github: "rails/webpacker"
> bundle
> bin/rails webpacker:install
# 〜省略〜
Webpacker successfully installed 🎉 🍰
> ./bin/webpack
yarn run v1.15.2
error Command "webpack" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
# 💥💥💥
調査
はて...
installコマンドで全部必要なもの入れてくれるんじゃないの？
installコマンドのログで怪しいところを見てみると...
error
error compression-webpack-plugin@2.0.0: The engine "node" is incompatible with this module. Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.1.0"
error Found incompatible module
Expected version ">= 6.9.0 <7.0.0 || >= 8.9.0". Got "8.1.0"
マジか。その謎の溝はなんなんだろう。8.1.0は対象外😇
warning
warning "webpack-dev-server > webpack-dev-middleware@3.6.2" has unmet peer dependency "webpack@^4.0.0".
warning " > webpack-dev-server@3.3.1" has unmet peer dependency "webpack@^4.0.0".
has unmet peer dependency "webpack@^4.0.0"
必要な"webpack@^4.0.0"が無いと出ている。
対応
1. 一旦Webpackerのインストールで出来た修正とファイルを全削除。
# 他にdiffが無い状態だったので
> git add .
> git commit -m xxx
> git reset --hard head^
# gitの管理外のnode_modulesも一応全部削除
> rm -rf ./node_modules/*
2. nodeの12.1.0をインストール
12.1.0である必要はないけど、8.9.0以上だったら良いっぽいので、せっかくなので最新をインストール。
> nodenv install 12.1.0
> echo 12.1.0 > .node-version
> npm install -g yarn
3. 再度Webpackerのインストール
# Gemfileに追加して
> bundle
> rails webpacker:install
今度はエラーは出なかったが、unmet dependencyのwarningは変わらずに出ている🤔
> ./bin/webpack
# 成功した
通った🔥
なんかwarningは出てるけど後々対応していく。