Dev server outputing webpack progress line by line

ErikIDX commented 5 years ago

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 commented 5 years ago

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

AshGrowem commented 5 years ago

@bseib Thanks for the catch! I updated my comment

vpiskunov commented 5 years ago

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

kristoferjoseph commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

haoqunjiang commented 5 years ago

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 commented 5 years ago

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

geekytime commented 5 years ago

@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 commented 4 years ago

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

version: ~4.2.0

cdll commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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

snitin315 commented 1 year ago

https://github.com/webpack/webpack/pull/16810 should fix this issue.

vuejs / vue-cli