Using the external configuration item of webpack in the development environment can cause react refresh to fail

[fandywen]

在开发环境使用webpack 的 externals 配置项会导致 react-refresh 失效，这有什么解决方案嘛？这个是react-refresh-webpack-plugin本身的BUG吗？

[nyngwang]

Did you read this?

https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react

---

Why do you need it in production anyway? The point of react-refresh-webpack plugin is that it lets you keep the current state of your app during the application of the update during development. In production, you should already define all possible components and be able to use a state management framework to keep the current state of your app before-and-after the substitution. So what's your real use case?

[fandywen]

@nyngwang Not in a production environment. During local debugging in the dev environment, external settings were set in the webpack, resulting in the failure of the react refresh webpack plugin hot update

[nyngwang]

I made a wrong assumption about your question.

For development environment, I recommend you take a full read of #334. At least, there are two examples that seem to be highly relate to your case:

[source]
I have fixed the sandbox (and all the HTTPS errors etc.) and made it work with externalisation. https://codesandbox.io/s/react-refresh-externals-14fpn

It should be generic enough - whenever you're externalising React this should be the solution you can use in the places where React is pulled from scripts (so in micro-frontends, this would be the host app; in mono-repos, this would be the app entry). I would admit that it is a bit clunky, but in this case I'm really unsure if there's anything more we can do. Using React Dev Tools is a quick and dirty solution to ensure the React DOM renderer always inject if you don't want to deal with the mess.

and this:

[source]
Very glad I found this -- thanks for the info @ pmmmwh. Had a similar issue implementing for this project here: https://github.com/enuchi/React-Google-Apps-Script/

I'm externalizing React, and also loading the app in an iframe. The console showed refresh was working, but the changes weren't being reflected. I loaded the app in a regular browser window instead of in an iframe and then it worked fine! -- but based on above realized it was due to React Dev Tools being loaded (I'm assuming Dev Tools isn't getting loaded inside the iframe window). I just tried in a separate profile without React Dev Tools and it also didn't work.

So my solution was to just not externalize React when in development and it works great. Is that the recommended approach (if it's something we can control)? Couldn't figure out what the solution actually was in the codesandbox example you gave.

[pmmmwh]

Unfortunately externalizing React is tricky as transforms depends a lot on injection order - echoing the comment above it would be good to look at the sandbox I created.