React hot loading does not work even after configuration

Question

Installed the latest react-hot-loader

yarn add react-hot-loader@next

Updated the entry point:

entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        './src/app.jsx'
    ],

Added react-hot-loader/babel to babel plugins:

{
    test: /.jsx?$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, 'src'),
    exclude: /node_modules/,
    options: {
        presets: [['es2015', { modules: false }], 'react'],
        plugins: ['react-hot-loader/babel']
    }
},

Added the HMR plugin

plugins: [
    new CopyWebpackPlugin([
        { from: 'src/index.html' }
    ]),
    new WriteFilePlugin(),
    new webpack.HotModuleReplacementPlugin()
],

Used AppContainer

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Home from './components/home';

const render = Component => {
    ReactDOM.render(
        <AppContainer>
            <Home />
        </AppContainer>,
        document.getElementById('react')
    )
};

render(Home);

if (module.hot) {
    module.hot.accept('./components/home', () => render(Home));
}

And still does not work. The page does a full reload.

Answer 1

Ok, Figured out this one after an hour of googling and reading. With Webpack 2 and above, the following configuration should be added to devServer:

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true
}

In the earlier Webpack documentation which I referred to, it suggested this:

Make sure to use either the --hot flag, or the HotModuleReplacementPlugin in your webpack.config.js, but never both at the same time as in that case, the HMR plugin will actually be added twice, breaking the setup.