vue+webpack+GitHub環境にて、npm run devのエラーがどうしようもなくなった件

はじめに

npmのパッケージを追加したら、npm dev run でエラーが出てどうしようもなくなりました。
原因は、完全に知識不足によるものでしたが、独学でなんとなくやっているとこんなおかしなことではまってしまうということを記録に残したく記事にしました。
（そもそもすぎて、エンジニア向けのQAサイトなどでは解決に至るような記事はなかった）

事象

以下のどちらかが出ていました。

$ npm run dev

> homepage-project@1.0.0 dev /Users/{ユーザー名}/work/homepage-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:628
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:839:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! homepage-project@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the homepage-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/{ユーザー名}/.npm/_logs/2019-08-25T11_07_31_715Z-debug.log

$ npm run dev

> homepage-project@1.0.0 dev /Users/{ユーザー名}/work/homepage-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! homepage-project@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the homepage-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/{ユーザー名}/.npm/_logs/2019-08-25T11_18_02_225Z-debug.log

やってみた事（全て事象解決に至らず）

• モジュールの削除
• npmキャッシュの削除
• １つ目のエラーに出ているような足りないパッケージのインストール
• npmでアップデート
• package.jsonとnode_modulesを元通りにする（パッケージインストール前の状態をGitなどから取得）

エラーの出方は若干変わったものの、相変わらずエラー。なお、npm run buildは問題なし。

気づいたこと

気になったのは、webpack-dev-severがローカルとグローバルに存在している事。

# ローカル（
/Users/{ユーザー名}/work/homepage-project/node_modules/webpack-dev-server

# グローバル
/usr/local/lib/node_modules/webpack-dev-server

# エラーになる前のパス（通っている）
$ webpack-dev-server -v
webpack-dev-server 2.11.5
webpack 3.12.0

# エラーになった後のパス
$ webpack-dev-server -v
✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration misses the property 'entry'.
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   -> The entry point(s) of the compilation.

一部、グローバルを参照していそうな事。

1つ目のエラー抜粋

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js
（略）
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]

元通りにできた方法

node_modulesを削除して、package.jsonとnode_modulesをパッケージインストール前に戻してからnpm iでもエラーが出続けるのは何かおかしい。しかしもう二進も三進もいかないので、webpackを初期化しました。

# エラー原因となったパッケージを入れたのはローカルなのでローカルを削除（削除できていない場合は、sudoをつけてください）
$ rm -fr /Users/{ユーザー名}/work/homepage-project/node_modules

# ローカルディレクトリの上階層に移動
$ cd /Users/{ユーザー名}/work/

# webpackを再度適用（プロジェクト作成の時に打ったコマンドと同じものをうつ）
$ vue init webpack homepage-project

# 初期インストールされるいくつかのファイルを元に戻す
inde.js、index.html、package.json、App.vue、logo.png、.gitgignore、utils.jsなど

初期化に伴いいくつかのファイルが元に戻るので必要におうじてバックアップから復帰しました。
初期化で入れられるファイル以外はそのままなのでまっさらなプロジェクトが作られる事はありません。

何が違うのか

流石におかしくなる前とあとで大差があると思えない。
お恥ずかしながらエラーに悩まされすぎて初めて、package.jsonはあくまでバージョン管理（記載されたバージョンのパッケージを入れる道しるべ）である事を認識したのですが、ふとある事に気づく。

webpack初期化時のpackage.json

    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",

パッケージをインストールするまで使っていたpackage.json

    "webpack-bundle-analyzer": "^３.４.１",
    "webpack-dev-server": "^3.7.2",

これは一番最初にGitHubにアップした時にバージョンを怒られていたので自分で変更したのですが、

この警告を消すために、package.jsonを指摘通り（3.x.x以上にしろという指摘だった）package.jsonを修正してコミットしました。
なんと、package.jsonとnpmに理解が０だった私は、このあとnpm iなどはもちろんせずに、警告が解消した事に機嫌を良くして開発を続けました。

package.jsonに時限爆弾を仕込み爆発させないまま開発を続けていたという事です。

その時限爆弾は、次にpackage.jsonが参照された時点で爆発する状態だったので、なんらかの理由でnpm iや他パッケージのインストールで依存関係とともにアップデートされたりして爆発したわけです。
試しに、webpack-dev-serverを2.x.xまでダウングレードて試したところエラーが出ない事を確認しました。
2.x.xと3.x.xでパスの指定や設定の解釈が異なるようです。

対応

今回は、2->3への移行は行わずに2.x.xは維持したまま開発を続行するため、package.jsonは以下の形で修正しました。

package.json

    "webpack-bundle-analyzer": "^３.４.１",
    "webpack-dev-server": "^2.9.1",

終わりに

今回は、目的物の作成が必達目的だったため、2.x.xのまま開発を進める予定ですが、
本件は2->3への移行はいつか必要になる事ですし、webpackなど依存関係もあるようなので、公式のドキュメントを参考にしつつ取り組めればと思います。