pmmmwh / react-refresh-webpack-plugin

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
MIT License
3.13k stars 192 forks source link

Error when adding import to another member in the same module. #847

Open JSerFeng opened 3 months ago

JSerFeng commented 3 months ago

I modify a module like:

import { 
  foo
+ bar
} from "./components/index";

console.log(foo);
+ console.log(bar);

const App = () => {
  return <div></div>;
};

export default App;

There will be an error image

Reason

The chunk id is affected by modules inside that chunk. So if I have a initial chunk with module a, let's say its id is src_a, then updated the chunk with modules a and b, the chunk id changes to src_a-src_b, the hot-update.json is like

{
  "m": [],
  "r": ["src_a"],
  "c": [],
}

However the new chunk src_a-src_b is not appear here, because it's a new chunk to hmr, it should be loaded again by its parents. However if it doesn't have parent (initial chunk), it cannot be loaded, thus the new module b cannot be loaded, the error above is caused by this.

However in Webpack, if error occur, the page will reload, so it's fine if not using this plugin. This plugin will handle error occured in HMR, so Webpack do not know if something wrong during hmr

I'm wondering if we can throw this error back to Webpack instead of consuming it