sockjs 404 when calling webpack-dev-server from API

[panlina]

• Operating System: MacOS
• Node Version: 10.14.1
• NPM Version: 6.4.1
• webpack Version: 4.28.3
• webpack-dev-server Version: 3.1.14

• This is a bug
• This is a modification request

Code

const Webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config');
webpackConfig.mode = "development";
webpackConfig.entry.index = [webpackConfig.entry.index, 'webpack-dev-server/client/'];

const compiler = Webpack(webpackConfig);
const server = new WebpackDevServer(compiler, {
    publicPath: "/dist/",
});

Expected Behavior

Everything works fine.

Actual Behavior

Gets GET http://localhost:8080/dist/info?t=1547796416979 404 (Not Found) in console

For Bugs; How can we reproduce the behavior?

Run the code above will hopefully reproduce this.

Research

The related code is:
https://github.com/webpack/webpack-dev-server/blob/v3.1.14/client-src/default/index.js#L30-L39
and
https://github.com/webpack/webpack-dev-server/blob/v3.1.14/client-src/default/index.js#L194-L200.

It will get "dist" as urlParts.path, then connect http://localhost:8080/dist as the socket endpoint, then get 404 for http://localhost:8080/dist/info?t=1547796416979, while the true url is http://localhost:8080/sockjs-node/info?t=1547796416979.

This issue happens with webpack-dev-server API only. When using webpack-dev-server from cli, it is inline mode by default and uses __resourceQuery, which is "?http://localhost:8080" and makes the socket endpoint correct.

Am I using the API correctly? If true, why is the script path(stripped of the last segment) used in the socket endpoint?

[alexander-akait]

@panlina Please create minimum reproducible test repo and describer what you have and what you expected in README

[panlina]

Following may be not a "minimum", but small enough:
https://github.com/panlina/resq-example/tree/webpack-dev-server-issue-1628

1. git clone https://github.com/panlina/resq-example.git
2. cd resq-example
3. git checkout webpack-dev-server-issue-1628
4. npm i
5. npm start
6. open browser at http://localhost:8080
7. look at the console

[alexander-akait]

@panlina i will look on this in near future, but feel free to investigate and if you think it is bug feel free to send a PR

[panlina]

Sure. Can you answer my question at the end of my post?

[alexander-akait]

@panlina not sure, looks like bug

[panlina]

After tracing back several blames, an interesting commit is 7dcd41d#diff-895656aeaccff5d7c0f56a113ede9662
. I'm no sure if that used to work before socket.io is replaced by SockJS.
@SpaceK33z Can you give us some information? How using urlParts.path as socket url prefix is supposed to work?

[piotrblasiak]

I also experience this problem. I serve my HTML from another port (because my backend is doing HMR as well), and webpack-dev-server even with HMR turned off seems to want to connect using sockjs to // instead of the dev-server port.
As a sidenote this is also a problem when using WebpackDevServer.addDevServerEntrypoints so I had to manually add webpack-dev-server/client?http://${devServerHost}:${devServerPort} and "webpack/hot/dev-server" to my entry point to make that work.

[alexander-akait]

@piotrblasiak Duplicate #1628? Looks you need sockPort and sockHost options, can you create minimum reproducible test repo to unsure it is help

[piotrblasiak]

@evilebottnawi ah there we go - I thought it would be enough to have the port in WebpackDevServer.listen(... ) but apparently I needed it in options as well. Thanks!

[alexander-akait]

@piotrblasiak 👍 You can send a PR

[yordis]

The issue I am facing is that I am the socket client is using window.location.{hostname, port} and I am including my JavaScript in a second server.

Rails Server: http://localhost:3000
Webpack Dev Server: http://localhost:5000

sockjs.js:1793 GET http://192.168.141.56:3000/sockjs-node/info?t=1556570647605 net::ERR_CONNECTION_REFUSED

I think we should take some extra configs to be able to change the hostname and the port.

I tried to fix this and it seems that we use __resourceQuery global variable for this.

I tried to find where we set that value in the Webpack organization but I couldn't find it.

Can you give me some idea of where I need to look at so I can fix this?

[alexander-akait]

@yordis we support sockHost, sockPort and sockPath options now, problem still exists?

[yordis]

@evilebottnawi let me check again, will get back to you.

[alexander-akait]

Problem still exists, duplicate #1385