Connection to localhost does not work on Mac due to IPv6

[Timmmm]

• Operating System: macOS 10.14.4

• Node Version: 10.16.0

• NPM Version: 6.9.0

• webpack Version: 4.41.0

• webpack-dev-server Version: 3.8.1

• Browser: Electron 6

• This is a bug

• This is a modification request

Code

Create a default project like this:

npm install -g @vue/cli
vue create foo # Add Typescript, but it probably doesn't make a difference.
cd foo
vue add electron-builder

Run the electron app:

npm run electron:serve

Or run the web server:

npm run serve

Expected Behavior

• Electron page loads correctly.
• The "local" URL that the web server prints (App running at: - Local: http://localhost:8080/) should work.

Actual Behavior

You get a blank electron app, and http://localhost:8080/ does not load. The problem is that webpack-dev-server actually listens on 127.0.0.1 (or maybe 0.0.0.0), but somewhere in its code it says "Oh ... 127.0.0.1? Silly users won't understand that! I'll replace it with localhost which is much more friendly."

A gallant aim perhaps, but not a robust one. On Mac localhost resolves to ::1, not 127.0.0.1. Since Electron and the web browser have been told to connect to localhost (::1) but the server is actually listening on 127.0.0.1, they do not work.

A workaround is to put this in your vue.config.js file:

module.exports = {
  devServer: {
    host: '127.0.0.1'
  }
}

I also reported this bug to vue-cli but I'm pretty sure the problem is actually in webpack-dev-server.

[alexander-akait]

I think you have broken hosts file (or maybe something other works not as expected), because localhost should be always resolve as
The name localhost normally resolves to the IPv4 loopback address 127.0.0.1, and to the IPv6 loopback address ::1.[1] (https://en.wikipedia.org/wiki/Localhost)

0.0.0.0 !== 127.0.0.1

[ErikMikkelson]

This happened to me after upgrading to Catalina. The fix above worked for me.

[alexander-akait]

@ErikMikkelson hm, maybe regression in new Catalina. it’s also rather strange that we didn’t receive issue from other developers, i will look on this in near future.

What webpack-dev-server output to you? Maybe vue-cli uses 0.0.0.0, not 127.0.0.1?

[Timmmm]

Ugh, finally found an answer via this other person. Bloody antivirus!

They basically intercept every connection to localhost:8080. Specifically that host/port combo: localhost:8081 and 127.0.0.1:8080 both work fine. It was nothing to do with IPv6. Check out this madness (with no server running):

$ telnet localhost 8081
Trying ::1...
telnet: connect to address ::1: Connection refused
Trying 127.0.0.1...
telnet: connect to address 127.0.0.1: Connection refused
telnet: Unable to connect to remote host

$ telnet 127.0.0.1 8080
Trying 127.0.0.1...
telnet: connect to address 127.0.0.1: Connection refused
telnet: Unable to connect to remote host

$ telnet localhost 8080
Trying ::1...
Connected to localhost.
Escape character is '^]'.
Connection closed by foreign host.

Sorry for blaming you guys!

I'd suggest using a different default port, but frankly this is ESET's fault & fuck those guys.

[alexander-akait]

@Timmmm thanks for feedback and investigation, good job!

[adampatterson]

I am here with the same issue but for local domains.

Previously any local domain host entry like 127.0.0.1 mysite.local and it worked fine, but it used to be very slow to resolve. So I switched to IP6 ::1 mysite.local and being lazy had a few times with both.

I dug up an old site and it would not resolve, I can't even ping it. But as soon as I add 127.0.0.1 it works again 🤷‍♂️.