Dev server outputing webpack progress line by line

[ErikIDX]

Version

3.11.0

Environment info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
  Binaries:
    Node: 10.16.3 - /usr/bin/node
    Yarn: Not Found
    npm: 6.9.0 - /usr/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 69.0
  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.11.0 
    @vue/babel-preset-jsx:  1.1.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.1.0 
    @vue/cli-overlay:  3.11.0 
    @vue/cli-plugin-babel: ^3.4.0 => 3.11.0 
    @vue/cli-plugin-e2e-cypress: ^3.4.0 => 3.11.0 
    @vue/cli-plugin-eslint: ^3.4.0 => 3.11.0 
    @vue/cli-plugin-unit-jest: ^3.4.0 => 3.11.0 
    @vue/cli-service: ^3.4.0 => 3.11.0 
    @vue/cli-shared-utils:  3.11.0 
    @vue/component-compiler-utils:  3.0.0 
    @vue/devtools: ^4.1.5 => 5.1.1 
    @vue/eslint-config-standard: ^3.0.5 => 3.0.5 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/test-utils: ^1.0.0-beta.25 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue:  4.7.1 
    jest-serializer-vue:  2.0.2 
    vue: ^2.6.2 => 2.6.10 
    vue-click-outside:  1.0.7 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.3 
    vue-jest:  3.0.4 
    vue-loader:  15.7.1 
    vue-router: ^3.0.1 => 3.1.2 
    vue-scrollto:  2.15.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.2 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vue-types:  1.6.0 
    vuex: ^3.1.0 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 3.11.0

Steps to reproduce

• Create the following package.json

{
  "name": "test",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve"
  },
  "dependencies": {},
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-e2e-cypress": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-unit-jest": "^3.4.0",
    "@vue/cli-service": "^3.4.0",
    "@vue/devtools": "^4.1.5",
    "@vue/eslint-config-standard": "^3.0.5",
    "@vue/test-utils": "^1.0.0-beta.25",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "jest-transform-stub": "^2.0.0",
    "node-sass": "^4.10.0",
    "postcss-cli": "^6.0.1",
    "postcss-prefixer": "^2.1.0",
    "sass-loader": "^7.0.1",
    "vue": "^2.6.2",
    "vue-template-compiler": "^2.6.2"
  }
}

• npm i
• Import the folder into the Vue CLI UI
• Serve it and look at the output

What is expected?

Nice tidy output

What is actually happening?

New lines for every update, no clearing of previous output

---

Unsure of what prompted this, but the output in the Vue UI suddenly stopped its text parsing behavior when looking at the output view when serving a project. I have updated to the latest Vue CLI and used a previous build of the project and there has been no change.

[bseib]

I noticed this too. Here's a similar issue, with a workaround: #3603 (comment)

Note in that vue.config.js snippet from @ashrafhadden it is missing the closing ] and ) characters toward the end. It should be:

// vue.config.js
// ...

module.exports = {
  chainWebpack: config => {
    // remove vue-cli-service's progress output
    config.plugins.delete('progress')
    // optionally replace with another progress output plugin
    // `npm i -D simple-progress-webpack-plugin` to use
    config.plugin('simple-progress-webpack-plugin').use(require.resolve('simple-progress-webpack-plugin'), [
      {
        format: 'minimal', // options are minimal, compact, expanded, verbose
      },
    ])
  }
}

[AshGrowem]

@bseib Thanks for the catch! I updated my comment

[vpiskunov]

Same issue here! just noticed it happening - only in vue ui, runs fine in terminal

[kristoferjoseph]

This issue is making CI build status pretty useless for us.
Are there any flags to make the webpack progress go away?

UPDATE: Just delete the progress bar until this is fixed:

// vue.config.js
// ...

module.exports = {
  chainWebpack: config => {
    // remove vue-cli-service's progress output
    config.plugins.delete('progress')
  }
}

👆that actually removes the wall of progress bar output from CI

Using the "simple-progress-webpack-plugin" isn't much better.

[ascott18]

This caused the dev server when used in conjunction with ASP.NET Core's SpaServices UseWebpackDevMiddleware to go from ~5 seconds for a fresh start build to several minutes.

[petrovicz]

Same issue here. Is it going to be fixed in the next major release only?

[haoqunjiang]

Introduced in this commit webpack/webpack#9225
The stderr of the child process does not have a columns property so it's set to Infinity, thus the problem.

Not yet sure how to fix it. Will investigate later.