Vue-cli: The default generated vue-cli app isn't served on http://localhost:8080/ although other ports work

[arnavb]

Version

3.10.0

Reproduction link

https://github.com/arnavb/test-vue-port-issue

Environment info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: Not Found
    npm: 6.10.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: Not Found
    Safari: 12.1.1
  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.10.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.10.0 
    @vue/cli-plugin-babel: ^3.10.0 => 3.10.0 
    @vue/cli-plugin-eslint: ^3.10.0 => 3.10.0 
    @vue/cli-service: ^3.10.0 => 3.10.0 
    @vue/cli-shared-utils:  3.10.0 
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 3.10.0

Steps to reproduce

• Clone the repository I linked.
• Run npm i.
• Run npm run serve and open http://localhost:8080/ in the browser.

What is expected?

The vue cli app is properly served.

What is actually happening?

I get a ERR_CONNECTION_RESET upon doing opening the URL. However, the network url works correctly. In addition, running say npm run serve -- --port 3000 works for both provided URLs.

---

Just to make sure this wasn't a problem with my port 8080 (not sure how that would happen), I added a file to the repository called http-server-on-8080.js with the following content:

const http = require("http");

http
  .createServer((req, res) => {
    res.write("Hello World!");
    res.end();
  })
  .listen(8080);

When I run node http-server-on-8080.js and visit http://localhost:8080/, however, I am greeted with the words "Hello World!". As such, this leads me to believe that this is an issue with vue-cli of some sort.

[ThibaultVlacich]

Same issue here, since updating to 3.10.0. It's serving on a random port, even if I'm explicitly specifying to serve on the port 8080.

PS> yarn serve --port 8080
yarn run v1.17.3
$ vue-cli-service serve --port 8080
 INFO  Starting development server...                                                  

 DONE  Compiled successfully in 9442ms                                                                                                                                                  

  App running at:
  - Local:   http://localhost:16587/   
  - Network: http://192.168.1.25:16587/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

Port 8080 is not in use, as confirmed by the Get-Process command:

PS C:\Windows\system32> Get-Process -Id (Get-NetTCPConnection -LocalPort 8080).OwningProcess
Get-NetTCPConnection : No MSFT_NetTCPConnection object with property "LocalPort" equal to "8080" has been found.

[htokuda10]

Just an update here in regards to random port assignment. I started a new project today and ran into the same issue, and decided to debug through the dependencies.

It looks to be an issue with the node-portfinder (https://github.com/http-party/node-portfinder) dependency, which is located in the @vue/cli-service/lib/commands/serve.js. You can read about the issue here, https://github.com/http-party/node-portfinder/issues/84.

I would like to note that I believe @arnavb and @thibaultVlacich are experiencing two separate issues.

[apphost]

npm i -S [email protected]
Install [email protected] can be fixed temporarily.

[ThibaultVlacich]

npm i -S [email protected]
Install [email protected] can be fixed temporarily.

Doesn't work, as the cli-service uses portfinder located in node_modules/@vue/cli-service/node_modules/portfinder and not node_modules/portfinder (I'm using yarn, maybe it makes a difference, I'm not sure).

EDIT: For yarn, you need to add the following in the package.json and then run yarn install

"resolutions": {
  "portfinder": "1.0.21"
},

[qingchiapp]

+1

[tuhe32]

+1

[LinusBorg]

likely duplicate of #4460 / #4452 ?

[sodatea]

No, the buggy version of portfinder was released after this issue. And I can't reproduce the described problem locally. Maybe some sort of anti-virus software or browser issue?

[numfin]

give access to node from firewall

[arnavb]

@numfin I don't think it's that, since the regular http server works on port 8080.

[arnavb]

Closing this for now. I never found out what the issue was, so I just use another port as of now.