Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wujekbogdan opened this issue May 17, 2019 · 9 comments

Comments

Projects
None yet
9 participants
@wujekbogdan
Copy link

commented May 17, 2019

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.

@dland512

This comment has been minimized.

Copy link

commented 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'
    }
};
@Mo0812

This comment has been minimized.

Copy link

commented May 17, 2019

Duplicate of #4016

@pSnehanshu

This comment has been minimized.

Copy link

commented May 17, 2019

Having this issue as well

@half2me

This comment has been minimized.

Copy link

commented May 17, 2019

@dland512 thanks for the workaround. Had me going crazy, as I just wanted to prototype something quick, and I couldn't get this to work.

@pSnehanshu

This comment has been minimized.

Copy link

commented May 17, 2019

@dland512 Your solution works, thanks.

@slaveofcode

This comment has been minimized.

Copy link

commented May 17, 2019

@dland512 Amazing fix! you save my day

@broady02

This comment has been minimized.

Copy link

commented May 17, 2019

I can also confirm this workaround works.

@ccbayer

This comment has been minimized.

Copy link

commented May 17, 2019

worked for me too. thanks @dland512

@LinusBorg

This comment has been minimized.

Copy link
Member

commented May 17, 2019

Closin this in favor of #4016

@LinusBorg LinusBorg closed this May 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.