Webpack hot module replacement stuck at [HMR] Waiting for update signal from WDS

Question

I'm using webpack hot module replacement in my react project. configuration looks like below.

let compilerConfig = {
    entry: [
        'babel-polyfill', 
        'webpack-dev-server/client?http://0.0.0.0:9000/',
        'webpack/hot/only-dev-server',
        path.join(ws.srcDir, 'client', 'src', 'index.js'),

    ],
    devtool: 'source-map',
    output: {
        path: path.resolve(ws.srcDir, 'public'),
        filename: 'main.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(?:p|s)?css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: true,
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: { config: { path: path.join(__dirname, "postcss.config.js") } }
                        },
                    ],
                }),
            },
            {
                test: /\.(png|woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|jsx)?$/,
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'node_modules', 'astro'),
                ],
                loader: 'babel-loader',
                options: {
                    babelrc: false,
                    presets: [
                        'react',
                        'es2015',
                        'stage-2'
                    ]
                },
            },
            {
                test: /\.svg$/i,
                use: [
                    {
                        loader: "babel-loader",

                    },
                    {
                        loader: "svg-react-loader",
                        query: {
                            classIdPrefix: '[name]-[hash:8]__',
                            propsMap: {
                                fillRule: 'fill-rule',
                                foo: 'bar'
                            },
                            xmlnsTest: /^xmlns.*$/
                        }
                    }
                ],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': `"${NODE_ENV}"`,
        }),
        new ExtractTextPlugin('styles.css'),
        new HTMLWebpackPlugin({
            template: path.join(ws.srcDir, 'client', 'src', "index.html"),
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
};


const serverConfig = {
    contentBase: path.resolve(ws.srcDir, 'client', 'src'),
    port: process.env.PORT || '9000',
    inline: true,
    host: '0.0.0.0',
    historyApiFallback: true,
    stats: {
        colors: true,
    },
    headers: {
        'Access-Control-Allow-Origin': '*'
      },
};

And i'm starting webpack dev server through gulp as below.

gulp.task('webpack-dev', function() {

    WebpackDevServer.addDevServerEntrypoints(compilerConfig, serverConfig);
    const webpackConf = webpack(compilerConfig);
    new WebpackDevServer(webpackConf, serverConfig)
        .listen('9000', '0.0.0.0', function(err) {
            if (err)
                throw new Error("webpack-dev-server", err);
            // Server listening
            console.info("[webpack-dev-server]", "http://localhost:9000");
        })


})

Getting [WDS] Disconnected! error after some time. And also i'm not seeing [WDS] Hot Module Replacement enabled. log in the console.

when i do a code change webpack is recompiling, but don't see it reflecting in the browser.

Using below version.

webpack = 2.3.x
webpack-dev-server = 2.4.x

Answer 1

Found the problem. I was loading a script in my index.html. That got failed(404). This is causing Hot Module Replacement to fail.