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

概要

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

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

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

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

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

参考サイト様

環境

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

> [email protected] 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! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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を実行するとエラーが発生しなくなる。

雑感

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

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

概要

目次

参考サイト様

環境

リポジトリ

事象

再現手順

エラーログ

原因

対策

雑感