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

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

Open nyngwang opened this issue 1 year ago • 1 comments

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"
},