How to fix "webpack Dev Server Invalid Options" in Vuejs

Question

I am using @vue/cli v3.7.0 and I created a project by vue create myapp with Babel + Router + node-sass and my project got installed successfully

But when I ran npm run serve (in the project directory) I got following error:

  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 (C:\Users\Dell\Desktop\myapp\node_modules\webpack-dev-server\node_modules\schema-utils\src\validateOptions.js:32:11)     at new Server (C:\Users\Dell\Desktop\myapp\node_modules\webpack-dev-server\lib\Server.js:71:5)     at serve (C:\Users\Dell\Desktop\myapp\node_modules\@vue\cli-service\lib\commands\serve.js:138:20)     at process._tickCallback (internal/process/next_tick.js:68:7)     at Function.Module.runMain (internal/modules/cjs/loader.js:757:11)     at startup (internal/bootstrap/node.js:283:19)     at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3) 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!     C:\Users\Dell\AppData\Roaming\npm-cache\_logs\2019-05-17T19_40_14_984Z-debug.log 

I tried npm cache clean -f, reinstallation of VueJS, recreation of project but nothing worked :(

I expect my npm run serve work!

Answer 1

yea this issue just popped up in the last few hours in @vue/cli. I had the same thing in a fresh project. To fix it try this:

1. Create a file in the root of your project called vue.config.js if you don't already have that file.

2. Add this to that file:

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

Then re-run your project. Something happened last night where the clientLogLevel value that comes preset became incorrect.

Here's a thread talking about this issue: GitHub.

Answer 2

I have no idea why you're getting that error but here is how you'd configure that option:

1. Create vue.config.js in your root directory

2. Enter the following into it:

module.exports = {   devServer: {     clientLogLevel: 'debug'   } } 

3. Rerun npm run serve

You can read more about configuring the dev server here.