あとらすの備忘録

チラ裏のメモ帳 | C#とかVue.jsとかAWSとか興味のあることちまちまやってます。

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

概要

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

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

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

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

目次

参考サイト様

環境

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

リポジトリ

事象

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

再現手順

# パッケージ更新確認
$ 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で議論され既に修正済みです。

対策

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

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

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

雑感

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