はじめに

この記事は「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 の (node-16181) DeprecationWarning- Tapable.plugin is deprecated. Use new API on .hooks instead の対処方法

こちらもエラーになっているライブラリが違いますが、詳細ログを表示する方法が紹介されていました。
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

ｴﾗｰｷｴﾀﾜｰｲ (/・ω・)/

おわりに

エラーをそのまま検索してヒットしたものが解決策だと思い込んでいて、解決せずに困っていました。
解決できなかったのは、検索条件の不足と、その不足部分が何なのかを調べる手段を知らなかったからでした。
結局先輩の力を借りてしまいましたが、問題解決のいい勉強になりました！