Vue-cli: Cannot disable webpack error overlay

Created on 4 Jul 2018  路  2Comments  路  Source: vuejs/vue-cli

Version

3.0.0-rc.3

Reproduction link

https://github.com/octref/disable-overlay

Steps to reproduce

  • Observe vue.config.js tried using both chainWebpack and configureWebpack to disable dev server overlay
  • yarn serve
  • Notice the syntax error in Helloworld.vue causes browser to show error overlay

Note: If I disable overlay by manually going into https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/commands/serve.js#L129-L131 in my node_modules, I can disable overlay. It seems vue.config.js is not read properly by vue-cli for the webpack options.

What is expected?

Error overlay is disabled

What is actually happening?

Error overlay is enabled

question cli-service serve

Most helpful comment

devServer options are processed separatly by vue-cli serve, so they have their own options key in vue.config.js:

https://cli.vuejs.org/config/#devserver

// vue.config.js
module.exports = {
  devServer: {
    overlay: false,
  }
}

All 2 comments

devServer options are processed separatly by vue-cli serve, so they have their own options key in vue.config.js:

https://cli.vuejs.org/config/#devserver

// vue.config.js
module.exports = {
  devServer: {
    overlay: false,
  }
}

Ah I see, I just searched for webpack and directly jumped to https://cli.vuejs.org/guide/webpack.html. Thanks for the explanation.

However I'm wondering why neither chainWebpack nor configureWebpack worked. Are they only for properties that can't be configured at the top level, such as devServer? If that's the case, I think a reference to which properties cannot be configured with chainWebpack or configureWebpack should be included on top of https://cli.vuejs.org/guide/webpack.html.

Was this page helpful?
0 / 5 - 0 ratings