react-refresh-hotfix is react-refresh-webpack-plugin's additional feature support
npm install react-refresh-hotfixreact-refresh-hotfix is react-refresh-webpack-plugin additional feature support, to fix some issues like:Although the React official team doesn't consider this a bug, here is an alternative to improve the HMR development experience for others.
sh
use npm
npm install -D react-refresh-hotfix
use yarn
yarn add -D react-refresh-hotfix
`$3
First, follow the official guide react-refresh-webpack-pluginThen, add the following to your webpack config:
`js
const refreshFixPlugin = require("react-refresh-hotfix");
const isDevelopment = process.env.NODE_ENV === "development";
module.exports = {
plugins: [
isDevelopment && new refreshFixPlugin(),
].filter(Boolean)
}
`Or, you can use the following configuration to avoid the need to modify the webpack config:
`jsconst isDevelopment = process.env.NODE_ENV === "development";
module.exports = {
alias: {
...(isDevelopment ? { react$: 'react-refresh-hotfix/react' } : {}),
},
modules: {
rules: [
isDevelopment && {
test: /\.[m|c]?[jt]sx?$/,
exclude: /node_modules/,
use: ['react-refresh-hotfix/loader'],
},
].filter(Boolean)
}
};
``