feat: utilise EntryPlugin for proper entry injection in Webpack 5

Author: pmmmwh

lib/index.js

@@ -1,5 +1,11 @@
 const { validate: validateOptions } = require('schema-utils');
-const { DefinePlugin, ModuleFilenameHelpers, ProvidePlugin, Template } = require('webpack');
+const {
+  DefinePlugin,
+  EntryPlugin,
+  ModuleFilenameHelpers,
+  ProvidePlugin,
+  Template,
+} = require('webpack');
 const ConstDependency = require('webpack/lib/dependencies/ConstDependency');
 const { refreshGlobal, webpackRequire, webpackVersion } = require('./globals');
 const {
@@ -72,11 +78,40 @@ class ReactRefreshPlugin {
     const logger = compiler.getInfrastructureLogger(this.constructor.name);
     let loggedHotWarning = false;
 
-    // Inject react-refresh context to all Webpack entry points
-    compiler.options.entry = injectRefreshEntry(
-      compiler.options.entry,
-      getAdditionalEntries({ options: this.options, devServer: compiler.options.devServer })
-    );
+    // 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({
+      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);
+            });
+          });
+
+          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);
+            });
+          });
+        }
+      );
+    }
 
     // Inject necessary modules to bundle's global scope
     /** @type {Record<string, string | boolean>}*/
@@ -217,8 +252,8 @@ class ReactRefreshPlugin {
             );
 
             compilation.hooks.normalModuleLoader.tap(
-              // `Infinity` ensures this check will run only after all other taps
-              { name: this.constructor.name, stage: Infinity },
+              // `Number.POSITIVE_INFINITY` ensures this check will run only after all other taps
+              { name: this.constructor.name, stage: Number.POSITIVE_INFINITY },
               // Check for existence of the HMR runtime -
               // it is the foundation to this plugin working correctly
               (context) => {