Webpack + react-hot-loader modified state page cannot be hot updated

configure https://github.com/gaearon/re. according to the document. When you modify the name field of state in the file, the page will not be updated, but the button text, page in the render function will be updated.

"dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js"

base config

const path = require("path");
const APP_PATH = path.resolve(__dirname, "../app");
const DIST_PATH = path.resolve(__dirname, "../dist");

module.exports = {
  entry: {
    app: "./app/index.js",
    vendors: ["react", "react-dom"]
  },
  output: {
    filename: "js/bundle.js",
    path: DIST_PATH
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: "babel-loader",
        include: APP_PATH
      }
    ]
  }
};

dev config


module.exports = merge(baseWebpackConfig, {
  mode: "development",
  output: {
    filename: "js/[name].[hash:16].js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      inject: "body",
      minify: {
        html5: true
      },
      hash: false
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    port: "3015",
    contentBase: path.join(__dirname, "../public"),
    compress: true, // gzip
    historyApiFallback: true,
    hot: true, //  webpack 
    https: false,
    noInfo: false,
    open: true, // open the browser
    proxy: {}
  }
});

index.js



import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

App.js

import React from "react";
import { hot } from "react-hot-loader";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "world",
      show: true
    };
  }

  render() {
    return <div>
      {this.state.show && <button>button</button>}
      <h1>Hello, {this.state.name}</h1>
    </div>;
  }
}

export default hot(module)(App);


console can print log, after the code update, but the page is not updated. What is the reason?

[WDS] 91% - additional asset processing.
client:127 [WDS] 92% - chunk asset optimization.
client:127 [WDS] 92% - after chunk asset optimization.
client:127 [WDS] 93% - asset optimization.
client:127 [WDS] 93% - after asset optimization.
client:127 [WDS] 94% - after seal.
client:127 [WDS] 95% - emitting.
client:127 [WDS] 95% - emitting (HtmlWebpackPlugin).
2VM5824 client:127 [WDS] 98% - after emitting.
2VM5824 client:127 [WDS] 100% - Compilation completed.
VM5824 client:218 [WDS] App hot update...
VM5849 log.js:24 [HMR] Checking for updates on the server...
client:218 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Nothing hot updated.
log.js:24 [HMR] App is up to date.
VM5849 log.js:24 [HMR] Updated modules:
VM5849 log.js:24 [HMR]  - ./app/App.js
VM5849 log.js:24 [HMR] App is up to date.

App.js remove react-hot-loader

import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'world',
      show: true
    };
  }

  render() {
    return <div>
      {this.state.show && <button>button</button>}
      <h1>Hello, {this.state.name}</h1>
    </div>;
  }
}

index.js, change it

const renderApp = () => ReactDOM.render(
  <App />,
  document.getElementById('root')
);

function run() {
  renderApp();
  if (module.hot) {
    module.hot.accept(renderApp);
  }
}

run();

also encountered the same problem. Have you solved


this problem


there are several settings to set:

webpack.config.js

module.exports = {
    // Make sure react-hot-loader is required before react and react-dom:
    entry: ['`react-hot-loader/patch`', 'your.js'],
    
    devServer: {
        hot: true
    },
    
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    
    resolve: {
        alias: {
            // :React-Hot-Loader: react-?-dom patch is not detected. React 16.6+ features may not work.
            // 
            'react-dom': '@hot-loader/react-dom'
        }
    }
}

.babelrc

{
    plugins: [ 'react-hot-loader/babel' ]
}

add

where you want to hot update
if (module.hot) {
    module.hot.accept('./pages/Root', () => {
        const NextRoot = require('./pages/Root').default
        render(<NextRoot />, rootElem)
    })
}

// PS: <Root />  ProviderStoreRouter 
// const Root = () => {
//     return (
//         <Provider store={MyStore}>
//             <Router history={hashHistory} routes={routes} />
//         </Provider>
//     )
// }

and remember to install the corresponding package

react-hot-loader, @ hot-loader/react-dom, etc.

Menu