Module becomes `undefined` after refresh due to cyclic dependencies about react-refresh-webpack-plugin HOT 7 CLOSED

@Timer I think you're the better judge of that! But it does appear that you successfully copied my code into a test case. 😅 Does the fact that it passes CI mean that this works correctly in @next/react-refresh-utils already?

from react-refresh-webpack-plugin.

@sophiebits thanks for this excellent reproduction!

I've added a test case for this to the Fast Refresh conformance suite (destined for the facebook/react repo). Can you please confirm it tests all the cases you've found buggy?

vercel/next.js#12161

from react-refresh-webpack-plugin.

@sophiebits Thanks for the reproduction! It seems that the latest version of the plugin also don't have this issue anymore, can you try it out and see if it fixes the issue for you too?

I'll further investigate this tonight.

from react-refresh-webpack-plugin.

Sorry, I had tried on the latest stable but not the latest beta.

For my mini repro case, I did a bisect and it seems that c66bda1 is the commit that fixed this, though I don't understand why.

But for my larger app, it still seems broken on 0.3.0-beta.5. 🙈 Will try to re-reduce when I have time but lmk if you have other ideas.

from react-refresh-webpack-plugin.

For my mini repro case, I did a bisect and it seems that c66bda1 is the commit that fixed this, though I don't understand why.

It has something to do with whether SurveyOverview is being detected as a React component, because that affects whether the module is included in the react-refresh life cycle.

But for my larger app, it still seems broken on 0.3.0-beta.5. 🙈 Will try to re-reduce when I have time but lmk if you have other ideas.

I can confirm that if you rename SurveyOverview to surveyOverview, the issue persists (even in @next/react-refresh-utils). I'll have to look deeper and see which part of the integration is broken because it is most likely a race condition ☹️

from react-refresh-webpack-plugin.

I have further investigated the issue and it seems that even without the plugin the issue still persists (given that we don't accept SurveyOverview, and accepts Milestones, NudgeOverview and App - as aligned with their corresponding Refresh Boundary status).

Tbh I'm not sure if we're hitting the limit of Webpack here, it seems to me that the issue only exists when there' both cyclic imports and reexported dependencies. I'll file an issue in Webpack's repository and see what we can do about it.

See webpack/webpack#11016

from react-refresh-webpack-plugin.

Closing as it is marked as won't fix in upstream.

from react-refresh-webpack-plugin.