sockjs-node gives 404 after upgrade to v3. (wp v3 -> wpv4). wds not serving up html files

[gregveres]

• Operating System: Windows 10
• Node Version: v10.15.0
• NPM Version: v6.9.0
• webpack Version: 4.30.0
• webpack-dev-server Version: 3.3.2

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

Code

// webpack.config.js
const path = require("path");
const webpack = require("webpack");
const Merge = require("webpack-merge");
var WebpackNotifierPlugin = require('webpack-notifier');
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

const ScriptBundleDir = '/Scripts/bundles';

common = {
    entry: {
        'Controllers/Root/Ads/Index': './Scripts/Controllers/Root/Ads/Index.ts',
        'Controllers/Root/BoxLeague/Create': './Scripts/Controllers/Root/BoxLeague/Create.ts',
         // deleted 66 other entry points
    },
    target: "web",
    resolve: {
        // Add ".ts" and ".tsx" as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json", ".html"],
        modules: [path.resolve(__dirname, "Scripts"), "node_modules"]
    },
    module: {
        rules: [
            {
                test: /.ts$/,
                use: {
                    loader: "awesome-typescript-loader",
                    options: {
                        "configFileName": 'tsconfigWebpack.json',
                        useCache: true
                    }
                }
            },
            {
                enforce: "pre",
                test: /\.js$/,
                use: {
                    loader: "source-map-loader"
                }
            },
            {
                test: /\.html$/,
                use: {
                    loader: "html-loader",
                    options: {
                        attrs: false,
                        minimize: true,
                        removeComments: false
                    }
                }
            },
            {
                test: /knockout-validation/,
                sideEffects: true
            },
            {
                test: /timezone-picker/,
                sideEffects: true
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery",
            ko: "knockout-validation"
        }),
        new webpack.NormalModuleReplacementPlugin(/^messenger$/, 'messenger-hubspot/build/js/messenger.js'),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.HashedModuleIdsPlugin(),
        new HardSourceWebpackPlugin()
    ],

    watchOptions: {
        aggregateTimeout: 200,
        ignored: /node_modules/
    },

    // pretty terminal output
    stats: {
        colors: true,
        entrypoints: false,
        modules: false,
        warningsFilter: (warning) => {
            return /entrypoint size limit/.test(warning);
        }
    }
};

module.exports = Merge(CommonConfig, {
    mode: "development",
    devtool: "inline-source-map",

    output: {
        // I add in the .min so that I can see that it is minimized and bundled
        filename: "[name].js",
        chunkFilename: "[name].chunk.js",
        // the output is going to into the /Scripts/bundles directory and then a tree structure under that
        path: __dirname + ScriptBundleDir,
        // Making sure the CSS and JS files that are split out do not break the template cshtml.
        publicPath: 'http://10.211.55.6:8080/Scripts/',
        // Defining a global var that can used to call functions from within ASP.NET Razor pages.
        library: "Skycourt",
        libraryTarget: "var"
    },

    plugins: [
        new WebpackNotifierPlugin()
    ]
});

Note that the above config is really split into common config (between dev and prod) and dev config. I merged them here to show the dev config that is driving WDS

My project is a .Net project so .Net is serving up the website, not WDS and that is the root of the problem, I think. Each .Net page has its own entry point that is being bundled

Expected Behavior

The site is being served on localhost:50447 but WDS is serving the JS files on localhost:8080.

I see a tone of these requests:
http://localhost:50447/sockjs-node/info?t=...

These should not be going to localhost:50447, they should be going to localhost:8080.

Actual Behavior

the sockjs-node request is being made to the web site web server rather than WDS.
At this point WDS is not able to talk with the client so all those great features are no longer working.

For Bugs; How can we reproduce the behavior?

you need a situation where you serve your web site from one server and WDS from another server (ie, port). It looks like it will happen all the time with this situation.

For Features; What is the motivation and/or use-case for the feature?

[gregveres]

I meant to say that this might be the same bug as #1796, but that description was talking about a different situation where it shows up. For this situation, I get the following errors:

`log.js:24 [HMR] Waiting for update signal from WDS...
abstract-xhr.js:132 GET http://localhost:50447/sockjs-node/info?t=1555458399621 404 (Not Found)
AbstractXHRObject._start @ abstract-xhr.js:132
(anonymous) @ abstract-xhr.js:21
setTimeout (async)
AbstractXHRObject @ abstract-xhr.js:20
XHRLocalObject @ xhr-local.js:8
InfoAjax @ info-ajax.js:19
InfoReceiver._getReceiver @ info-receiver.js:36
InfoReceiver.doXhr @ info-receiver.js:56
(anonymous) @ info-receiver.js:25
setTimeout (async)
InfoReceiver @ info-receiver.js:24
SockJS @ main.js:121
initSocket @ socket.js:9
(anonymous) @ client:259
FPRn @ Index.js:24136
webpack_require @ bootstrap:723
fn @ bootstrap:100
34 @ MemberController.ts:3
webpack_require @ bootstrap:723
(anonymous) @ bootstrap:790
(anonymous) @ bootstrap:790

client:222 [WDS] Disconnected!
GET http://localhost:50447/sockjs-node/info?t=1555458401041 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555458403168 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555458407252 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555458415330 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555458431412 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555458463454 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555458527716 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555458656103 404 (Not Found) GET http://localhost:50447/sockjs-node/info?t=1555458912211 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555459424340 404 (Not Found)
GET http://localhost:50447/sockjs-node/info?t=1555460448443 404 (Not Found)
`
and it just keeps going, although it has definitely backed off on its attempts

[crazywako]

I get following errors after reinstalling node_modules and getting new webpack-dev-server
And accessing localhost:8888. We have Docker Nginx proxy to forward traffic to right ports.

sockjs.js:1683 WebSocket connection to 'ws://localhost:8888/sockjs-node/465/n1vjgeo1/websocket' failed

And it just keeps pouring. Once every about 2 seconds.

Downgrading helped
"webpack-dev-server": "3.1.1"

Command:
webpack-dev-server --mode development --config ./webpack-dev.config.js --hot --progress --colors --content-base build --port 8085 --host 0.0.0.0

webpack-dev.config.js

module.exports = {
  entry: [
  // setup the hot mobule loading
  'webpack-dev-server/client?http://localhost:8085/',
  'webpack/hot/only-dev-server',
  // our entry file
  './app/main.js'
  ],

[alexander-akait]

Fixed in master, you should use sockPath/sockPort when you use difference url for sockjs and webpack-dev-server self

[alexander-akait]

For future please don't put you big configuration in issue, it is hard to understand and read, please put minimum reproducible test repo link, thanks

[alexander-akait]

Also you don't need include entry manually (webpack-dev-server do this if you enable hot), it can break your setup

[gregveres]

Ah, hot replacement has never worked for me. I guess that is why. So I only need the entries for production? Ok, that really eliminates most of the need for a shared config file. I will give it a try.

[AndreiRailean]

i'm running into this after upgrading to 3.3.1 from 3.2.1
@evilebottnawi me and @gregveres are not trying to set a separate port for sockJs. i.e. #1792 can be used to solve it, but it would be a hacky workaround (when it is released)

the issue here is that devServer.port specified in webpack conf (or on command line) is not used anymore for websocket connections and appears to fall back to the port used for serving the html.

in our case html is served by a completely unrelated piece of tech (rails), so i'm certain there's no confusion between server and client config, i.e. our web just points to the webpack-dev-server URL and on initial load everything gets bundled fine, but then it tries to hit the wrong websocket endpoint.

in our case html is served from localhost:3000, but webpack-dev-server is on localhost:3001. initial load is fine, but immediately after page renders we get this in console

[AndreiRailean]

this issue is caused by #1664

[alexander-akait]

I already written what we need revert this commit, PR welcome

[vorlov]

any update on that? the issue still exists in 3.8.1

[Venryx]

Also you don't need include entry manually (webpack-dev-server do this if you enable hot), it can break your setup

This should be emphasized more. In fact, webpack-dev-server should throw an error if you try to do this -- manually adding webpack-dev-server as one of the paths for a webpackConfig.entry entry, if webpack-dev-server is already adding it itself.

I spent about 3 hours trying to debug this obscure issue, for what ended up as a 1-3 line fix. ^_^

(Hard to debug because I didn't realize the debugger was hitting into two separate instances of webpack-dev-server, only one of which was receiving the incorrect host/port information.)

I don't have time to go into it all, but here is the commit where I solved my issue: Venryx/mobx-devtools-advanced@d1fdb0d#diff-2c81437e455a833c25e31879ed05c465

Related:

• hot-update.json 404 (Not Found) #1385
• HMR stopped work after webpack upgrade from 3 to 4 webpack-contrib/webpack-hot-middleware#292 (comment)