Make webpack-dev-server to do hot reloading AND eliminate EMPTY response error in React

Question

I have been trying to make React app development easier by using reloading of the app when I modify the files and I tried webpack-dev-server for that (Please, see my previous thread: Can't set up webpack-dev-server to start React app). I made hot reloading working but got an issue: timeouts started to occur on my requests and I see the empty response errors in console. There are threads that discuss the issue, e.g.: https://github.com/webpack/webpack-dev-server/issues/183 but so far I could not make it working. Setting --host 0.0.0.0 is not working, setting --port 3000 eliminates empty response error but hot reloading is gone... Below is my webpack relevant config:

  devServer: {
    index: '',
    open: true,
    proxy: {
      context: () => true, // endpoints which you want to proxy
      target: 'http://localhost:3000' // your main server address
    }
  },
  entry: {
    app: ['babel-polyfill', './views/index.js']
    //vendor: ["react","react-dom"]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './public')
  },
  devtool: "#eval-source-map",
... 

I am starting the app by running npm run dev, here is a part of the package.json:

"scripts": {
    "client": "webpack-dev-server --mode development --devtool inline-source-map --port 3000 --content-base public --hot",
    "server": "node ./bin/www",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
  },

So, above if we remove --port 3000 hot reloading on the front end part starts working, but then the timeout is happening. Also, upon modification of the server side code the app is not reloaded unfortunately and I am not sure how to add this feature too. I am using react-hot-loader:

import React from 'react';
import ControlledTabs from './ControlledTabs'
import { hot } from 'react-hot-loader/root'

class App extends React.Component {
  render() {
    return (
        <ControlledTabs/>
    );
  }
}

module.exports = hot(App);

I think it should be related to the devServer configs most probably and how the webpack-dev-server is started. I just want to find a WORKING way of doing hot reloading instead of falling back into build - run cycle that is annoying and inefficient.

Also, it is really hard to say, what is going wrong, whether --port 3000 is really the issue. I noticed that the webpack-dev-server is somehow working in a very unpredictable way on my project meaning that after doing changes and launching the app I see one result, but then I restart webpack-dev-server and see a different result as if webpack-dev-server is doing something behind the scenes what it wants to and whenever it wants to without notifying me about that.

Update

I changed webpack.config.js to:

watch: true,
  devServer: {
    index: '',
    open: true,
    proxy: {
      context: () => true, // endpoints which you want to proxy
      target: 'http://localhost:3000' // your main server address
    }
  },
  entry: {
    app: ['babel-polyfill', './views/index.js']
    //vendor: ["react","react-dom"]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './public')
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],

And removed react-hot-loader from the React entry point:

import React from 'react';
import ControlledTabs from './ControlledTabs'

class App extends React.Component {
  render() {
    return (
        <ControlledTabs/>
    );
  }
}

module.exports = App;

Because otherwise it was giving me a syntax error in console, webpack could not start. After doing that if I modify any react file, whole webpage is reloaded it seems and the net::ERR_EMPTY_RESPONSE remains...

Answer 1

Add a watch to your webpack config.

watch: true

Also, you need to enable module replacement loading within the webpack dev server.

In short, if you see how this config is setup, this is a working example of hot reloading for a very basic react app. It uses ExpressJS as well.

https://github.com/chawk/bare_bones_react/blob/master/webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const express = require('express');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    devServer: {
        hot: true,
        compress: true,
        contentBase: path.join(__dirname, 'dist'),
        open: 'Chrome',
        before(app) {
            app.use('/static', express.static(path.resolve(__dirname, 'dist')))
        }
    },
    devtool: 'source-map',
    output: {
        filename: './js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: './server/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: [
            '.js'
        ]
    }
}