fix: make build pass with entry hooks

Author: pmmmwh

lib/index.js

@@ -33,6 +33,27 @@ const REPLACEMENTS = {
   },
 };
 
+/**
+ * Gets the socket integration to use for Webpack messages.
+ * @param {'wds' | 'whm' | 'wps' | string} integrationType A valid socket integration type or a path to a module.
+ * @returns {string | undefined} Path to the resolved socket integration module.
+ */
+function getSocketIntegrationEntry(integrationType) {
+  let resolvedEntry;
+  switch (integrationType) {
+    case 'whm': {
+      resolvedEntry = 'webpack-hot-middleware/client';
+      break;
+    }
+    case 'wps': {
+      resolvedEntry = 'webpack-plugin-serve/client';
+      break;
+    }
+  }
+
+  return resolvedEntry;
+}
+
 class ReactRefreshPlugin {
   /**
    * @param {import('./types').ReactRefreshPluginOptions} [options] Options for react-refresh-plugin.
@@ -81,36 +102,73 @@ class ReactRefreshPlugin {
     // Inject react-refresh context to all Webpack entry points.
     // This should create `EntryDependency` objects when available,
     // and fallback to patching the `entry` object for legacy workflows.
-    const additionalEntries = getAdditionalEntries({
+    const additional = getAdditionalEntries({
       devServer: compiler.options.devServer,
       options: this.options,
     });
-    if (!EntryPlugin) {
-      compiler.options.entry = injectRefreshEntry(compiler.options.entry, additionalEntries);
-    } else {
-      compiler.hooks.make.tapAsync(
-        // `Number.NEGATIVE_INFINITY` ensures this will run before any other entries
-        { name: this.constructor.name, stage: Number.NEGATIVE_INFINITY },
-        (compilation, callback) => {
-          additionalEntries.prependEntries.forEach((entry) => {
-            /** @type {import('webpack').EntryOptions} */
-            const entryOptions = { name: undefined };
-            const dependency = EntryPlugin.createDependency(entry, entryOptions);
-            compilation.addEntry(compilation.context, dependency, entryOptions, (err) => {
-              callback(err);
-            });
-          });
+    if (EntryPlugin) {
+      additional.prependEntries.forEach((entry) => {
+        new EntryPlugin(compiler.context, entry, { name: undefined }).apply(compiler);
+      });
 
-          additionalEntries.overlayEntries.forEach((entry) => {
-            /** @type {import('webpack').EntryOptions} */
-            const entryOptions = { dependOn: injectRefreshEntry.socketEntries, name: undefined };
-            const dependency = EntryPlugin.createDependency(entry, entryOptions);
-            compilation.addEntry(compilation.context, dependency, entryOptions, (err) => {
-              callback(err);
-            });
-          });
+      const socketEntryData = [];
+      compiler.hooks.make.tap(
+        { name: this.constructor.name, stage: Number.POSITIVE_INFINITY },
+        (compilation) => {
+          const integrationEntry = getSocketIntegrationEntry(this.options.overlay.sockIntegration);
+
+          // Exhaustively search all entries for `integrationEntry`.
+          // If found, inject `overlayEntries` to those entries,
+          // and ensure the order of dependencies either here or in `seal`.
+          // Else, inject `overlayEntries` to global entries.
+          for (const [name, entryData] of compilation.entries.entries()) {
+            const index = entryData.dependencies.findIndex((dep) =>
+              dep.request.includes(integrationEntry)
+            );
+            if (index !== -1) {
+              socketEntryData.push({ name, index });
+            }
+          }
         }
       );
+
+      additional.overlayEntries.forEach((entry, idx, arr) => {
+        compiler.hooks.finishMake.tapPromise(
+          { name: this.constructor.name, stage: Number.MIN_SAFE_INTEGER + (arr.length - idx - 1) },
+          (compilation) => {
+            // Only hook into the current compiler
+            if (compilation.compiler !== compiler) {
+              return Promise.resolve();
+            }
+
+            const injectData = socketEntryData.length ? socketEntryData : [{ name: undefined }];
+            return Promise.all(
+              injectData.map(({ name, index }) => {
+                return new Promise((resolve, reject) => {
+                  const options = { name };
+                  const dep = EntryPlugin.createDependency(entry, options);
+                  compilation.addEntry(compiler.context, dep, options, (err) => {
+                    if (err) return reject(err);
+
+                    if (name && typeof index !== 'undefined') {
+                      const entryData = compilation.entries.get(name);
+                      entryData.dependencies.splice(
+                        index + 1,
+                        0,
+                        entryData.dependencies.splice(entryData.dependencies.length - 1, 1)[0]
+                      );
+                    }
+
+                    resolve();
+                  });
+                });
+              })
+            ).then(() => {});
+          }
+        );
+      });
+    } else {
+      compiler.options.entry = injectRefreshEntry(compiler.options.entry, additional);
     }
 
     // Inject necessary modules to bundle's global scope
@@ -149,10 +207,8 @@ class ReactRefreshPlugin {
       }
     }
 
-    const definePlugin = new DefinePlugin(definedModules);
-    definePlugin.apply(compiler);
-    const providePlugin = new ProvidePlugin(providedModules);
-    providePlugin.apply(compiler);
+    new DefinePlugin(definedModules).apply(compiler);
+    new ProvidePlugin(providedModules).apply(compiler);
 
     const match = ModuleFilenameHelpers.matchObject.bind(undefined, this.options);
     const { evaluateToString, toConstantDependency } = getParserHelpers();
@@ -272,10 +328,14 @@ class ReactRefreshPlugin {
             break;
           }
           case 5: {
+            const EntryDependency = require('webpack/lib/dependencies/EntryDependency');
             const NormalModule = require('webpack/lib/NormalModule');
             const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
             const ReactRefreshRuntimeModule = require('./RefreshRuntimeModule');
 
+            // Set factory for EntryDependency which is used to initialise the module
+            compilation.dependencyFactories.set(EntryDependency, normalModuleFactory);
+
             compilation.hooks.additionalTreeRuntimeRequirements.tap(
               this.constructor.name,
               // Setup react-refresh globals with a Webpack runtime module

lib/utils/getAdditionalEntries.js

@@ -57,7 +57,7 @@ function getAdditionalEntries({ devServer, options }) {
     // Error overlay runtime
     options.overlay &&
       options.overlay.entry &&
-      `${options.overlay.entry}${queryString ? `?${queryString}` : ''}`,
+      `${require.resolve(options.overlay.entry)}${queryString ? `?${queryString}` : ''}`,
   ].filter(Boolean);
 
   return { prependEntries, overlayEntries };