はじめに
この記事は「Nuxt.js の導入 -2.8.1ver-」を対応している際に、インストールされたサンプルプログラムがエラーを出していたので、その理由と対策を調べてまとめました。
2019.07.25 追記
現在はERRORではなくINFOレベルになっていますが、エラーがどこで起こっているかもわからず苦労したので、その解決までの流れをまとめています！
エラーの内容
ERROR (node:22276) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instea
Nuxtプロジェクトを作成し npm run dev すると起動はするのですが、上記のようなエラーが出てしまいます。
原因の調査
エラーメッセージから検索
まずはエラーメッセージそのままでググってみました。
どうやら webpack のバージョンと他のライブラリの互換性の問題のようです。
「 webpack3から4に移行した時に出たエラーとやったこと 」という記事が参考になりましたが、インストールしたばっかりの Nuxt プロジェクトには extract-text-webpack-plugin というライブラリは使われていないので、別ライブラリが原因のようです。
どのライブラリーが原因なのか？
今のままではバージョン違いでエラーになっているライブラリがわかりません。
そんななか、闇雲にググっていると偶然見つけました。
こちらもエラーになっているライブラリが違いますが、詳細ログを表示する方法が紹介されていました。
webpack.config.js に process.traceDeprecation = true; を指定すればいいみたいです！
Nuxt.js の場合は nuxt.config.js が設定ファイルになるので、そこに記載、 nmp run dev してみました！
どうやら @nuxtjs のライブラリのどれかが原因みたいです。
エラーメッセージ + @nuxtjs で検索
クリティカルな Issues を発見しました！
Tapable.plugin is deprecated #185
この Issues によると、エラーの原因は @nuxtjs/pwa みたいです。
ちなみにこのエラー、 将来のバージョンアップで解消予定なので無視してもいい らしいです！
エラーの解消
でもやっぱりエラーは気になる……ということでエラーを解消させちゃいましょう！
原因を特定した Issues の中で、 @nuxtjs/pwa のベータバージョンを入れればエラーが解消する説明がありました。
@nuxtjs/pwa のバージョンを確認する
> npm info @nuxtjs/pwa versions
このコマンドでバージョンの一覧が表示されます。
最新は 3.0.0-beta.16 みたいです！
ベータバージョンのインストール
> npm install @nuxtjs/pwa@3.0.0-beta.16
実行してみましょう！
╭──────────────────────────────────────────╮
│ │
│ Nuxt.js v2.8.1 │
│ Running in development mode (spa) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰──────────────────────────────────────────╯
i Preparing project for development 14:20:36
i Initial build may take a while 14:20:36
√ Builder initialized 14:20:36
√ Nuxt files generated 14:20:36
√ Client
Compiled successfully in 5.95s
ｴﾗｰ ｷｴﾀ ﾜｰｲ (/・ω・)/
おわりに
エラーをそのまま検索してヒットしたものが解決策だと思い込んでいて、解決せずに困っていました。
解決できなかったのは、検索条件の不足と、その不足部分が何なのかを調べる手段を知らなかったからでした。
結局先輩の力を借りてしまいましたが、問題解決のいい勉強になりました！