react-hot-loader正确检查但未更新

Question

Minimum Repo Here

I'm trying to work on a react + electron + webpack2 demo project. Currently I'm stucked in react-hot-loader3 . As shown below, hot update checking seems to work correctly but not updating as expected(the changes I've made to Component not updated). Has this something to do with electron or something? I've never used react-hot-loader before.

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

module.exports = {
  entry: [
    'react-hot-loader/patch',
    path.resolve(__dirname, './src/index.jsx'),
  ],
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js*/,
        include: [ path.resolve(__dirname, 'src') ],
        loader: 'babel-loader',
      }, {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      'COMPONENTS': path.resolve(__dirname, './src/components'),
      'CONTAINERS': path.resolve(__dirname, './src/containers'),
      'MODELS': path.resolve(__dirname, './src/models'),
      'ROUTES': path.resolve(__dirname, './src/routes'),
      'SERVICES': path.resolve(__dirname, './src/services'),
      'THEMES': path.resolve(__dirname, './src/themes'),
    },
    extensions: ['.js', '.jsx', '.less'],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),

    new webpack.NoEmitOnErrorsPlugin(),

    new webpack.NamedModulesPlugin(),

    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html'),
    }),
  ],
  devtool: 'source-map',
  target: 'electron-renderer',
  devServer: {
    port: 8000,
    hot: true,
    historyApiFallback: true,
  },
};

import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Routes from './routes';

const main = document.createElement('div');
main.id = 'main';
document.body.appendChild(main);

const doRender = (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>
  , main);
}

doRender(Routes);

if(module.hot) {
  module.hot.accept('./routes', () => {
    doRender(Routes);
  });
}

export default class Routes extends React.Component {
  render() {
    return(
      <div>routes</div> // change text here did not update correctly.
    );
  }
}

Answer 1

Got this problem fixed, the minimum repo is here . Hope this helps.