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!

This error seem pretty clear, your options.clientLogLevel value seems wrong — Jérôme
– Jérôme, Commented May 17, 2019 at 15:30
How can I fix this error? How can I change that value in webpack configuration as in my project I don't have any webpack.config.js. Webpack stuff is managed by VueJS for me. — Arti Singh
– Arti Singh, Commented May 17, 2019 at 15:31

John Datserakis · Accepted Answer · 2019-05-17 15:51:21Z

16

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:

Create a file in the root of your project called vue.config.js if you don't already have that file.
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.

edited May 17, 2019 at 15:51

answered May 17, 2019 at 15:39

John Datserakis

9708 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christophe Geers Over a year ago

Got the same error today when I upgrade Vue CLI service in an existing project and after creating a hello word example. This change does idd make the webpack config valid again. Seems like a mistake in the default config.

Dan · Accepted Answer · 2019-05-17 15:37:38Z

5

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.

answered May 17, 2019 at 15:37

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Comments

Jamal Basha · Accepted Answer · 2021-10-12 09:16:00Z

1

Remove node_modules folder and npm install agani

rm -rf node_modules

answered Oct 12, 2021 at 9:16

Jamal Basha

5085 silver badges11 bronze badges

Comments

Philip Caleja · Accepted Answer · 2019-05-17 15:46:37Z

0

Seems like [email protected] broke something. I reverted it to 3.3.1 and it seems to be working.

answered May 17, 2019 at 15:46

Philip Caleja

11 bronze badge

Comments

D. Ben Knoble · Accepted Answer · 2019-05-17 15:50:01Z

0

The docs are a little confusing when using @vue/cli-service, since it essentially wraps webpack.

[Here is a link to the solution]( https://cli.vuejs.org/guide/webpack.html#simple-configuration)

Best thing to do is update your vue.config.js with something like

configureWebpack: {
    devServer: {
      clientLogLevel: `silent`,
    },
  },

edited May 17, 2019 at 15:50

D. Ben Knoble

4,7981 gold badge25 silver badges41 bronze badges

answered May 17, 2019 at 15:39

urban_coder

11 bronze badge

Comments

MorayJ · Accepted Answer · 2019-05-17 16:41:24Z

0

I edited

node_modules/@vue/cli-service/lib/commands/serve.js

so that line 139 says:

clientLogLevel: 'warn'

instead of

clientLogLevel: 'none'

(Edit - though I'm working with the hello-world app)

answered May 17, 2019 at 16:41

MorayJ

5372 silver badges8 bronze badges

Comments

Yuta Hiroto · Accepted Answer · 2019-05-17 17:51:21Z

0

webpack-dev-server has been released as v3.4.1 for hotfix. Please update. https://github.com/webpack/webpack-dev-server/releases/tag/v3.4.1

answered May 17, 2019 at 17:51

Yuta Hiroto

1

Collectives™ on Stack Overflow

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

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related