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

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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 16 (12 by maintainers)

Most upvoted comments

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

AviVahl on Dec 28, 2020

I think fixed in master.

Screenshot at 2021-02-20 17-39-22

snitin315 on Feb 20, 2021

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.

p8b on Jan 4, 2021

Thanks.

AviVahl on Feb 21, 2021