There are some edge cases where we have to manually refresh the page to see the change.

I found some edge cases:

[ ] Say you have a simple tag <h1>something</h1> and you want to use <h2> instead. If you save the file in the middle of your editing, e.g. at <h2>something</h1>, then you will get an error and that error will persist even after you finish editing by changing </h1> to </h2>.
[ ] Say you have a jsx file A.jsx, which imports some styles, e.g. import A from './to/some.css', and use some of its classname, e.g. A.someClass. Then if you clip-paste these lines from A.jsx to another jsx file B.jsx, you will have an error insisting that A.someClass is undefined in the destination file B.jsx. The error disappears when you full-refresh/reload the webpage.

I'm not sure whether the two problems are by design. It will be great if we can work around them. The first case is usually caused by the auto-save feature of an editor. The second case is very common when one wants to keep the fast-refresh feature during refactoring.

Need some guidance. @pmmmwh Thank you!

browser

Version 121.0.2277.128 (Official build) (arm64)

package.json

"devDependencies": {
  "@babel/core": "^7.23.7",
  "@babel/plugin-transform-runtime": "^7.23.7",
  "@babel/preset-env": "^7.23.9",
  "@babel/preset-react": "^7.23.3",
  "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
  "babel-loader": "^9.1.3",
  "css-loader": "^6.10.0",
  "css-minimizer-webpack-plugin": "^6.0.0",
  "html-webpack-plugin": "^5.6.0",
  "jsdoc": "^4.0.2",
  "mini-css-extract-plugin": "^2.8.0",
  "react-refresh": "^0.14.0",
  "style-loader": "^3.3.4",
  "webpack": "^5.90.3",
  "webpack-cli": "^5.1.4",
  "webpack-dev-server": "^5.0.2"
},

screenshots

In the first case, the error looks like this:

In the second case, the error looks like this:

pmmmwh / react-refresh-webpack-plugin

There are some edge cases where we have to manually refresh the page to see the change. #806

browser

package.json

screenshots