react-hot-loader checking correctly but not updating

问题

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.

webpack.config.js

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,
  },
};

index.jsx

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);
  });
}

routes/index.jsx

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

回答1:

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

来源：https://stackoverflow.com/questions/44772325/react-hot-loader-checking-correctly-but-not-updating

标签

javascript

reactjs

Webpack

react-hot-loader