pmmmwh / react-refresh-webpack-plugin

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

Not working with multiple entry points in webpack where one entry does not use react #798

Open dan-pixels360 opened 9 months ago

dan-pixels360 commented 9 months ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @pmmmwh/react-refresh-webpack-plugin@0.5.11 for the project I'm working on.

When using multiple entries in webpack if one bundle does not have RefreshRuntime it will throw an error and break code. Was using this with Wordpress Gutenberg where in the Wordpress admin panel Gutenberg uses react for sidebar items but in the front end we don't use react at all. Adding RefreshRuntime to the condition makes it work for both.

Here is the diff that solved my problem:

diff --git a/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js b/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
index 825056e..30a8722 100644
--- a/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
+++ b/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js
@@ -12,7 +12,7 @@ if (process.env.NODE_ENV !== 'production') {
     }

     // Only inject the runtime if it hasn't been injected
-    if (!safeThis[$RefreshInjected$]) {
+    if (!safeThis[$RefreshInjected$] && RefreshRuntime) {
       // Inject refresh runtime into global scope
       RefreshRuntime.injectIntoGlobalHook(safeThis);

This issue body was partially generated by patch-package.