Railsアプリを作ろうと思ってWebpackでVueをインストールしたらバージョン違いでネットの海を彷徨い歩いた
なにこれ
Railsの入門書を終えて、なにかアプリケーションを作ってみようと思った。
せっかくだし何かJavaScriptのフレームワークも一緒に使ってやってみようと思い、
最初の環境構築の部分を以下のサイトを参考に進めていこうとしたら壁にぶち当たった。
環境
問題が発生した箇所
上記サイトに沿ってProcfileを作成し、
bin/server
を実行したところ以下のようなエラーが発生しサーバーを立ち上げることが出来なかった。
03:19:36 webpacker.1 | Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.
解決？
「エラー内容的に@vue/compiler-sfcをインストールすればよさそう？」
そう思ったので
yarn add @vue/compiler-sfc
を実行したところ
warning " > webpack-dev-server@3.10.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "webpack-dev-server > webpack-dev-middleware@3.7.2" has unmet peer dependency "webpack@^4.0.0". warning " > @vue/compiler-sfc@3.0.0-beta.10" has incorrect peer dependency "vue@3.0.0-beta.10".
という警告が発生した。
とりあえず無視して、bin/serverを実行したところ、とりあえずサーバーは動いてlocalhost:5000にはアクセスできたが大量にエラーが発生してるし、コンパイルできていない。
そこでnpm ls --depth 0で依存関係を見てやったところ、
npm ERR! peer dep missing: vue@3.0.0-beta.10, required by @vue/compiler-sfc@3.0.0-beta.10
というエラーが発生していた。
「いや、vue-loaderが@vue/compiler-sfcを要求してるのに何でエラーが発生するねん」
と思った。
そこでpackage.jsonを参照してみるとvueのバージョンが2.6.11だった。
じゃあ、vueのバージョンを上げるか@vue/compiler-sfcのバージョンを下げるかどちらかだと思ったので、
とりあえず後から入れた@vue/compiler-sfcのバージョンを下げようと思って、githubを参照してみると
そもそも、@vue/compiler-sfcはvue 3.0以降に必要なものな気がする。
ならばvueのバージョンを上げるのかという話になるが、vueに触ること自体が初めてなのでbeta版はあまり使いたくない。
解決！
何が問題でエラーが発生していたかをもう一度考えると、vue-loaderに@vue/compiler-sfcが必要だったのだ。
もしかしたらvue-loaderのバージョンが問題なのかもしれない。
そう思い確認してみると
"vue-loader": "16.0.0-beta.1"
だった。
githubを確認してみると、
どうやら最新は15.9.2らしい。じゃあ16.0.0はどこなのか。リリースノートを確認してみる。
これもvue 3.0以降のために書かれていた。完全に理解した。
vue-loaderを15.9.2に下げればよかったのだ！！！
yarn remove vue-loader yarn add vue-loader@15.9.2
を実行した後
bin/server
を実行すると今回はコンパイル成功！無事にいつもの画面が表示された！
おわりに: 他に参考にしたサイトなど
初めて触るので、検索や生成されたファイルの見方や場所を理解するのに苦労した。
警告で一緒に出てきたunmet peer dependencyに関してはrailsでの生成時から発生してるものについては特に気にしなくてもいいのかな？（以下のサイト等いくつか参照したが結局放置することにした）
Unmet peer dependencies · Issue #1078 · rails/webpacker · GitHub
npm の has unmet peer dependency とはどういう状態ですか？ - スタック・オーバーフロー
vue-loaderも@vue/compiler-sfcも丁度最新版がリリースされたばっかりで笑ってしまった。(2020/05/08)
