Vue-cli: 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: https://github.com/vuejs/vue-cli/issues/3603#issuecomment-483913563

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
      },
    ])
  }
}

[ashrafhadden]

@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?

[sodatea]

Introduced in this commit https://github.com/webpack/webpack/pull/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.

[rayax86]

I am on v4.0.5 and even config.plugins.delete('progress') won't work for me

[geekytime]

@rayax86, I was able to get it working by adding the progress: false flag to a _second_ devServer block _outside_ of the configureWebpack block, like this:

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

The intention may have been to allow this flag on the configureWebpack.devServer block:

//vue.config.js
module.exports = {
  configureWebpack: {
    devServer: {
      progress: false
    }
  }
}

But that doesn't quite work because of this line: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/serve.js#L64

At that point in the code where the ProgressPlugin is being added, options refers to the entire vue.config.js object, so options.devServer doesn't point to the devServer block in configureWebpack.

In some ways, it does make sense to keep the progress: false flag outside of the configureWebpack block, since there is already a progress option on webpack-dev-server, but it is CLI-only. It may be confusing to overload it, here.

I'm not sure if this should be fixed as a bug, by checking options.configureWebpack.devServer.progress in serve.js, or if it just needs more robust documentation to explain the separate devServer block. 🤷‍♂

[towry]

set devServer.progress=false works, `chainConfig.plugins.delete("progress") not work.

version: ~4.2.0

[cdll]

same issue here with "@vue/cli-service": "^4.4.6" but works fine by

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

thanks to @geekytime

[erkage]

I have this issue after i'm add a concurrently vue start:
"serve": "concurrently -k \"nodemon ./src/database/server.js\" \"vue-cli-service serve --open\"",

version: 4.5.6

[vegerot]

Just in case there's any docker noobs like me here, trying to run vue-cli-service serve in a docker container. The problem was that I was not allocating a pseudo-tty. The output looks normal once I do

docker run -it --publish 8080:8080 myapp