Webpack4 Hot Update redux (does not support changing `store` on the fly.)

after webpack uses hot updates, redux reports an error as follows

has tried a lot of methods, but it doesn"t work. The react update uses webpack-hot-middleware + webpack-dev-middleware and uses node server.js to start the service. Hot updates are available, but redux reports the above error as long as it is modified and saved. Many reasons have been found but have not been solved. Here is the configuration of the portal server.js

const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const path = require("path");
const app = express();
const config = require("./webpack.config.js");
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  noInfo: false, //  
  historyApiFallback: true,
  stats: {
    colors: true,
  } 
}));

app.use(webpackHotMiddleware(compiler));

app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "index.html"));
})

app.use(express.static(path.join(__dirname, "public")));
// Serve the files on port 3000.
app.listen(3000, function () {
  console.log("Example app listening on port 3000!\n");
});

webpack.config.js


const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const webpack = require("webpack");


const nodeEnv = process.env.NODE_ENV || "development";
const isPro = nodeEnv === "production";

module.exports = {
  devtool: "inline-source-map",
  mode: "development",
  entry: {
    // app: "./src/index.js",
    app: ["webpack-hot-middleware/client", __dirname + "/src/index.js"], //webpack-hot-middleware/client
    // app: ["webpack/hot/dev-server","./src/index.js"], //webpack-hot-dev-server/client
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
            loader: "babel-loader",
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          "file-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      title: "webpack4",
      template: "./index.html"
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
          NODE_ENV: ""development""
      }
    }),
    new webpack.DefinePlugin({
       "__dev__": JSON.stringify(isPro) 
    }),
  ],
  resolve: {
    extensions: [".js", ".json", ".jsx", ".css", "less"],
  },

  // devServer: {
  //   publicPath: "/", //html /test/, /test/+ 
  //   contentBase: path.resolve(__dirname, "dist"),
  //   historyApiFallback: true,
  //   hot: true,
  //   inline: true,
  //   open: true,
  //   noInfo: true
  // }

};

entry file index.js

import React from "react";
import { render } from "react-dom";
import AppRouter from "./router.js"

import { Provider } from "react-redux"
import { createStore } from "redux"
import rootReducer from "./configReducer"
const store = rootReducer()

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

class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppRouter />
      </Provider>
    );
  }
}

hot(module)(Root)

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

entry file reducer.js

import rootReducer from "./reducers/index";
import { createStore, applyMiddleware, compose } from "redux";

export default function configureStore(initialState) {

  const Store = createStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept("./reducers", () => {
      const nextRootReducer = require("./reducers/index");
      Store.replaceReducer(nextRootReducer);
    });
  }

  return Store;
}
May.25,2021

when I configure hot updates, I also prompt for redux2.0 upgrade.
after you modify the file and save it for the first time according to the configuration above in github, there is still an error message

<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

but there is only an error prompt when you save it for the first time, and later changes to the file will not be done when you save it. And the data in redux still exists

document address https://github.com/reduxjs/re.

import { createStore } from 'redux';
import rootReducer from '../reducers/index';

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}
Menu