Webpack-dev-server: `webpack-dev-server`v4 cannot start with 'localhost'

[jerryOnlyZRJ]

• Operating System: MacOS
• Node Version: 14.15.0
• NPM Version: 6.14.9
• webpack Version: 5.10.3
• webpack-dev-server Version: 4.0.0-beta.0
• Browser: Google Chrome

• [x] This is a bug
• [ ] This is a modification request

Code

// webpack.config.js
module.exports = {
    ...,
    devServer: {
        host: 'localhost'
    }
}

Expected Behavior

The browser opens and starts with http://localhost:8080

Actual Behavior

The browser starts with http://127.0.0.1:8080 and logs this:

[webpack-dev-server] Project is running at http://127.0.0.1:8080/

For Bugs; How can we reproduce the behavior?

Cause this code server.address().address always return 127.0.0.1
There is the code permalink: https://github.com/webpack/webpack-dev-server/blob/910133d0a2383823504b3a0c2fd21b5a86e733a4/lib/utils/createDomain.js#L14

[alexander-akait]

Yes, because we resolve localhost to real API

[jerryOnlyZRJ]

Yes, because we resolve localhost to real API

@alexander-akait But there is a case that some old projects had been set cookies with localhost domain for e2e tests or other usages. If the dev server starts with real IP, those cookies will not work cause of cross-origin. How can we compatible with them more smoothly?

[alexander-akait]

It is just output [webpack-dev-server] Project is running at http://127.0.0.1:8080/, server starts on localhost and you can open localhost in your browser

[jerryOnlyZRJ]

It is just output [webpack-dev-server] Project is running at http://127.0.0.1:8080/, server starts on localhost and you can open localhost in your browser

@alexander-akait But most projects will set devServer.open = true, then the devServer will start http://127.0.0.1:8080/ in the browser. For the user, it will be confused because I set devServer.host to be localhost, but the browser opens the 127.0.0.1

https://github.com/webpack/webpack-dev-server/blob/910133d0a2383823504b3a0c2fd21b5a86e733a4/lib/utils/status.js#L43

[alexander-akait]

Solved in master, you can try

[jerryOnlyZRJ]

Solved in master, you can try

@alexander-akait The master branch seems cannot work with webpack v5. I use a symbolic link and use webpack-dev-server like this:

const WebpackDevServer = require('webpack-dev-server/lib/Server');

// ...

const server = new WebpackDevServer(compiler, devServerOptions)

server.listen(8080, 'localhost, () => {
  console.log('Starting server on http://localhost:8080');
});

and it throws an Error:

TypeError: The 'compilation' argument must be an instance of Compilation

[akphi]

@alexander-akait I think you have fixed tons of these issues on master, do you think we can try release beta.1? If not, what are the current blockers if any; maybe we should create a mega-thread for all of these, what do you think? Thank you so much!

[alexander-akait]

Yes, we need to do release, a lot of issue, try to do new release on this week

[jerryOnlyZRJ]

Yes, we need to do release, a lot of issue, try to do new release on this week

@alexander-akait Is there a new version for webpack5？

[rvion]

@alexander-akait could you share what is the recommanded way to test with master until the release is done ?

[alexander-akait]

@rvion why do not use beta-0, anyway if you need master - use this https://stackoverflow.com/questions/17509669/how-to-install-an-npm-package-from-github-directly (install from github), run npm i inside node_modules/webpack-dev-server and you have bundled master

[rvion]

📝@alexander-akait I do not use beta-0 because i'm both hacking around and writing types, and I wanted to take into account latest api changes.

🔶 Instally from github directly just do not work (at least with yarn), because some files need a build step after cloning the repo (I get an error related to some ../../client module not being found) That's part of the reason why I was asking this.

🟢In case it helps I ended-up cloning the repo, tweaking things around, building it, creating an npm tarball with npm pack, copying the archive in my project, then installing it via some {..., "webpack-dev-server": "file:./forks/webpack-dev-server-4.0.0.tgz", ...}. It was the best compromise I found to avoid polluting git history, and ensuring everyone on my team use the same version.

[akphi]

@alexander-akait sorry, is there anything blocking the release of beta-1?

[alexander-akait]

Some PRs should be merged, I am working on it

[rvion]

@alexander-akait thanks ! is there any update on this ?

[alexander-akait]

Should be fixed in master, I'll do it from tomorrow and do new beta release