question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"ValidationError: webpack Dev Server Invalid Options" error when running a newly created project.

See original GitHub issue

Version

3.7.0

Reproduction link

[http://It is not possible to provide a reproduction link in this case.](http://It is not possible to provide a reproduction link in this case.)

Environment info

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
  Binaries:
    Node: 8.15.1 - /usr/local/opt/node@8/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/opt/node@8/bin/npm
  Browsers:
    Chrome: 74.0.3729.157
    Firefox: 66.0.3
    Safari: 11.1.2
  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-service: ^3.7.0 => 3.7.0
    @vue/cli-shared-utils:  3.7.0
    @vue/component-compiler-utils:  2.6.0
    @vue/eslint-config-airbnb: ^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)
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.5.21 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

  1. Create a new project with vue-cli
  2. Go to the project dir
  3. Run yarn serve

What is expected?

Webpack web server starts

What is actually happening?

Ther’s an error in the console

→ yarn serve
yarn run v1.15.2
$ 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/wube/htdocs/tic-tac-toe/node_modules/schema-utils/src/validateOptions.js:32:11)
    at new Server (/Users/wube/htdocs/tic-tac-toe/node_modules/webpack-dev-server/lib/Server.js:71:5)
    at serve (/Users/wube/htdocs/tic-tac-toe/node_modules/@vue/cli-service/lib/commands/serve.js:138:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
    at Function.Module.runMain (module.js:696:11)
    at startup (bootstrap_node.js:204:16)
    at bootstrap_node.js:625:3
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The build command works fine, the problem is related to webpack dev server.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

21reactions
dland512commented, May 17, 2019

Getting this as well. This was working fine as little as 9 or 10 hours ago. The problem appears to be related to the autogenerated webpack config file (node_modules/@vue/cli-service/lib/commands/serve.js), which contains this:

const server = new WebpackDevServer(compiler, Object.assign({
      clientLogLevel: 'none',

As the error states, 'none' is no longer a valid option for some reason (not sure what changed to cause that). It can be worked around by adding a vue.config.js file to the root of the project that contains this:

module.exports = {
    devServer: {
        clientLogLevel: 'info'
    }
};
0reactions
LinusBorgcommented, May 17, 2019

Closin this in favor of #4016

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to fix "webpack Dev Server Invalid Options" in Vuejs
1. Create vue.config.js in your root directory · 2. Enter the following into it: module.exports = { devServer: { clientLogLevel: 'debug' } }...
Read more >
Vue CLI ValidationError: webpack Dev Server Invalid Options
This morning I ran into an issue creating a new Vue project using the Vue CLI. The strange thing about this is that...
Read more >
[webpack-cli] webpack dev server invalid options - You.com
webpack.config.js [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
Read more >
DevServer - webpack
If you're using dev-server through the Node.js API, the options in devServer will be ignored. Pass the options as the first parameter instead:...
Read more >
Vue CLI ValidationError: webpack Dev Server Invalid Options
Creating & Running a new VueJS Project ... A few seconds after trying to startup I received the following error in the terminal....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found