react-refresh-webpack-plugin icon indicating copy to clipboard operation
react-refresh-webpack-plugin copied to clipboard

Usage with `devServer.inline = false`

Open BenjaminWFox-MuleSoft opened this issue 3 years ago • 1 comments

I have a working implementation with ReactRefreshPlugin/HMR for our common-use development build scenario.

Another build scenario, however, requires setting the option devServer.inline = false to more closely simulate our environment that uses Module Federation, and this setting appears to break the integration with ReactRefreshPlugin, as it gives the error:

<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.

Under the hood, it appears that HMR is still functional - the webpack dev server status bar cycles through App ready. -> App updated. Recompiling... -> App hot update., but then the app itself never refreshes with the changes.

The only difference I see in the startup output is:

  • devServer.inline = true -> ℹ 「wds」: Project is running at https://localhost:8080/
  • devServer.inline = false -> ℹ 「wds」: Project is running at https://localhost:8080/webpack-dev-server/

Do you know if there's an easy/obvious way to get this working? Let me know if I can provide any additional information.

BenjaminWFox-MuleSoft avatar Jun 10 '22 22:06 BenjaminWFox-MuleSoft

I believe this does not impact the functionality - it is just a warning. It's definitely false positive here, because we try to detect if the HMR plugin is injected on the Webpack compiler, and when inline mode is used it is not injected for the current compiler. I'm not sure HMR would actually work with auto-refresh in that mode automatically, perhaps you need to use polling?

As for the warning, it's definitely something we can try to fix, but given that this mode have been completely removed from WDS v4 I rank this quite low on the list.

pmmmwh avatar Jun 13 '22 12:06 pmmmwh