Vue CLIでwebpack Dev Server Invalid Optionsエラーが発生する

概要

自身のポートフォリオをアップデートするためにVue.jsプロジェクトを久々に触ったら表題のエラーが発生して詰まったのでメモ。

1. Vue.jsプロジェクトをnpm outdatedとnpm updateでパッケージアップデート
2. npm run serveで表題のエラー発生

たまたま触り初めた日がバグの発生日でトラブルシュートが全然引っかからなかった...orz

記事を書いてる途中に確認したところ本件は下記のPullRequestで解消済みのようです。

• chore: upgrade webpack-dev-server to 3.4.1 by beardedpayton · Pull Request #4020 · vuejs/vue-cli

目次

参考サイト様

• New apps fail yarn serve due to invalid webpack dev server options · Issue #4016 · vuejs/vue-cli
• "ValidationError: webpack Dev Server Invalid Options" error when running a newly created project. · Issue #4017 · vuejs/vue-cli
• chore: upgrade webpack-dev-server to 3.4.1 by beardedpayton · Pull Request #4020 · vuejs/vue-cli
• vuejs2 - How to fix "webpack Dev Server Invalid Options" in Vuejs - Stack Overflow

環境

• Mac OS X Mojave 10.14.4
• Visual Studio Code Version: 1.33.1

$ node -v
v11.12.0
$ npm -v
6.9.0
$ vue --version
3.7.0

リポジトリ

• Lycheejam/my-portfolio: portfolio with vue.js

事象

上記リポジトリ（プロジェクト）で下記の手順を踏んだ後に下記のエラーが発生しました。

再現手順

# パッケージ更新確認
$ npm outdated
# プロジェクトパッケージ更新
$ npm update
# ローカルサーバスタート
$ npm run serve

エラーログ

上記手順を踏んだところ下記のエラーが発生しました。

$ npm run serve

> my-portfolio@0.1.0 serve /Users/<USERNAME>/work/my-portfolio
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

ValidationError: webpack Dev Server Invalid Options

options.clientLogLevel should be {String} and equal to one of the allowed values

 [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]

 (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)

    at validateOptions (/Users/<USERNAME>/work/my-portfolio/node_modules/webpack-dev-server/node_modules/schema-utils/src/validateOptions.js:32:11)
    at new Server (/Users/<USERNAME>/work/my-portfolio/node_modules/webpack-dev-server/lib/Server.js:71:5)
    at serve (/Users/<USERNAME>/work/my-portfolio/node_modules/@vue/cli-service/lib/commands/serve.js:138:20)
    at processTicksAndRejections (internal/process/next_tick.js:81:5)
    at process.runNextTicks [as _tickCallback] (internal/process/next_tick.js:51:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:865:11)
    at internal/main/run_main_module.js:21:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-portfolio@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-portfolio@0.1.0 serve 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/<USERNAME>/.npm/_logs/2019-05-17T15_05_18_982Z-debug.log

原因

webpack-dev-serverのデグレ
本件は下記のISSUEで議論され既に修正済みです。

• [regression] clientLogLevel should alias options "none" and "warning" · Issue #1899 · webpack/webpack-dev-server

対策

プロジェクトルートにvue.config.jsファイルを作成し、clientLogLevelを指定する。

• 参考：vuejs2 - How to fix "webpack Dev Server Invalid Options" in Vuejs - Stack Overflow

• コミット：add vue.config.js file · Lycheejam/my-portfolio@748527e

• vue.config.js

module.exports = {
  devServer: {
    clientLogLevel: 'info'
  }
};

上記の様にファイルを作成後、npm run serveを実行するとエラーが発生しなくなる。

雑感

ブログ書くのおそすぎた...
書いてるころにはもう修正がマージされてた...