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