Vue-cli: New apps fail yarn serve due to invalid webpack dev server options

[0xpr03]

Version

3.7.0

Environment info

  System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 11.15.0 - /usr/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.9.0 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 66.0.5
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.7.0 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.7.0 
    @vue/cli-plugin-babel: ^3.7.0 => 3.7.0 
    @vue/cli-plugin-eslint: ^3.7.0 => 3.7.0 
    @vue/cli-plugin-typescript: ^3.7.0 => 3.7.0 
    @vue/cli-service: ^3.7.0 => 3.7.0 
    @vue/cli-shared-utils:  3.7.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    @vue/eslint-config-typescript: ^4.0.0 => 4.0.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.2 (4.7.1)
    typescript: ^3.4.3 => 3.4.5 
    vue: ^2.6.10 => 2.6.10 
    vue-class-component: ^7.0.2 => 7.1.0 
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-property-decorator: ^8.1.0 => 8.1.1 
    vue-router: ^3.0.3 => 3.0.6 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.5.5

Steps to reproduce

Install vue-cli as defined in the examples
yarn global add @vue/cli
vue create demo
Select Typescript & Webpack
Then run yarn serve

What is expected?

yarn serve works

What is actually happening?

Yarn serve fails for a blank project with

$ yarn serve
yarn run v1.16.0
warning ../package.json: No license field
$ 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 (/home/user/Dev/demo/node_modules/schema-utils/src/validateOptions.js:32:11)
    at new Server (/home/user/Dev/demo/node_modules/webpack-dev-server/lib/Server.js:71:5)
    at serve (/home/user/Dev/demo/node_modules/@vue/cli-service/lib/commands/serve.js:138:20)
    at processTicksAndRejections (internal/process/task_queues.js:86:5)
    at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:56:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:880:11)
    at internal/main/run_main_module.js:21:11
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The same setup worked before on other projects but an update? seems to have broken this.
I know at least one other guy in discord with the same error.

[Mo0812]

Had the same issue.
To fix it add clientLogLevel: "silent" or clientLogLevel: "warn" in your webpack-dev-server config under vue.config.js for now!

There is a new webpack-dev-server version which changes the names of some log level variables: https://github.com/webpack/webpack-dev-server/commit/7f52bbf

[Kamsou]

or just encoutered the same thing
modifying serve.js file clientloglevel to 'info' has fixed it
its currently set to 'none' which is not a supported option
serve.js file located here: node_modules@vue\cli-service\lib\commands
line 139

[gr8den]

@Mo0812 Thank you

example of vue.config.js. create it in folder of project

module.exports = {
  devServer: {
    clientLogLevel: "warn",
  }
}

[0xpr03]

Ah I tried this first with a webpack.config.js as documented in https://webpack.js.org/configuration/dev-server/#devserverclientloglevel but that's apparently ignored or overridden

[wizardnet972]

Bug report, that's was fast :)

[svtfrancisco]

I made a pull request to fix it.
@gr8den the right equivalent should be 'silent' and not 'warn'

[hiroppy]

We have released [email protected] for fixing. Thanks. https://github.com/webpack/webpack-dev-server/releases/tag/v3.4.1

[pburdette]

Thanks @hiroppy !

@linusBorg I've opened a PR to bump to the latest version so the fix will go into play.

[bschwartz757]

I had this same issue after doing a fresh install of dependencies using vue-cli-3.6.3. I had deleted my package-lock file too.