[v4.3.0] auto-detected local server url is broken

[AviVahl]

Describe the bug

Starting with v4.3.0, when launching webpack serve --open, the detected server address is http://[::]:8080/.
I'm guessing this has something to do with ipv6 or similar.

What is the current behavior?

CLI output says Project is running at http://[::]:8080/, and --open launches browser with client failing with:

Uncaught DOMException: An invalid or illegal string was specified WebsocketClient.js:42
    WebsocketClient WebsocketClient.js:42
    initSocket socket.js:16
    8080 index.js:178
    Webpack 5

To Reproduce

Steps to reproduce the behavior:

I'm guessing this behavior depends on the environment.

git clone git@github.com:wixplosives/sample-monorepo.git
cd sample-monorepo
git checkout avi/webpack-cli-4.3.0
yarn
yarn build
yarn start

I just ran webpack serve on a typical project (https://github.com/wixplosives/sample-monorepo/blob/master/packages/app/webpack.config.js)

Most of the above config is just the defaults. Nothing customizes dev-middleware/server.

Expected behavior

Detect local address as localhost or 127.0.0.1. Same as previous versions.

Please paste the results of webpack-cli info here, and mention other relevant information

npx webpack-cli info

  System:
    OS: Linux 5.9 Fedora 33 (Workstation Edition) 33 (Workstation Edition)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 22.56 GB / 31.21 GB
  Binaries:
    Node: 14.15.2 - ~/.nvm/versions/node/v14.15.2/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.2/bin/yarn
    npm: 6.14.9 - ~/.nvm/versions/node/v14.15.2/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 84.0
  Monorepos:
    Yarn Workspaces: 1.22.10
    Lerna: 3.22.1
  Packages:
    html-webpack-plugin: ^5.0.0-beta.1 => 5.0.0-beta.1 
    webpack: ^5.11.0 => 5.11.0 
    webpack-cli: ^4.3.0 => 4.3.0 
    webpack-dev-server: ^4.0.0-beta.0 => 4.0.0-beta.0 

[alexander-akait]

This is very strange, because from half of the developers I hear that they want behavior as in Node.js, i.e. IPv6, others want the opposite, but this should not appears:

Uncaught DOMException: An invalid or illegal string was specified WebsocketClient.js:42

[alexander-akait]

To be honestly there is no bugs on webpack-cli side, here two things:

• default host in IPv6 (need dicussion)
• code for clients is not working on with IPv6 (easy to fix)

Let's move it in webpack-dev-server repo and fix it and do beta release

[alexander-akait]

But where and breaks --open is broken? All modern browsers supports http://[::]:8080/ (it is localhost in IPv6)

[AviVahl]

TBH, I never seen anyone uses ipv6 addresses for local development. Not to say it's necessarily uncommon, but it's certainly less tested.

The --open itself uses that ipv6 url, and so the client itself breaks with that domexception. The browser does open properly...

[alexander-akait]

TBH, I never seen anyone uses ipv6 addresses for local development. Not to say it's necessarily uncommon, but it's certainly less tested.

I need some think about this, I don't have strong opinion here, yep, it is rare, but from other side, using it is not bad, someone should start using IPv6 😄

The --open itself uses that ipv6 url, and so the client itself breaks with that domexception. The browser does open properly...

Yep, client should be fixed anyway, you can send a fix and help me

[AviVahl]

Workaround: specifying devServer: { host: 'localhost' } in webpack config causes the URL to be: http://127.0.0.1:8080/ (which the client works with).

[ilkkao]

Investigated this a bit. Raw IPv6 addresses in urls need to be put inside brackets as they contain colons and would conflict with the URL port part.

Dev server opens page http://[::]:8080/. That's correct and works. But then JS code tries to run new WebSocket("ws://[[::]]:8080/ws"). That fails. new WebSocket("ws://[::]:8080/ws") would work.

It looks like here hostname already contains brackets

webpack-dev-server/client-src/default/utils/createSocketUrl.js

Line 86 in b0161e9

hostname: host,

And then url.format adds another brackets. I think the fix is to remove possible brackets, something like s/^\[(.*)\]$/$1 before calling url.format as url.format calls the native URL api which can't be modified.

[alexander-akait]

Yep, feel free to send a fix

[alexander-akait]

I am finishing with webpack-cli, so new beta releases and fixes will be soon

[p8b]

If it's no bother, it would be nice for the URL to be http://localhost:8080/ when I specify devServer: { host: 'localhost' } rather than http://127.0.0.1:8080/ since if I want it to be http://127.0.0.1:8080/ I can do so like devServer: { host: '127.0.0.1' }.

That's because I have a custom certificate for http://localhost:8080/ and not http://127.0.0.1:8080/ and when the browser opens automatically I have to manually change it. It's just a little inconvenient and it kind of defeats the purpose of opening the browser automatically for me at least.

Thanks in advance.

[alexander-akait]

I think solution is simple here -

Project is running at localhost:8080 (http://127.0.0.1:8080/) (http://[::]:8080/)