Merge pull request #26 from pmmmwh/fix/chunking

fix: correctly inspect main templates to apply transform to JS runtime

Author: pmmmwh

src/helpers/createRefreshTemplate.js

@@ -31,12 +31,6 @@ const afterModule = `
  * @returns {string} A refresh-wrapped module.
  */
 function createRefreshTemplate(source, chunk) {
-  // If a chunk is injected with the plugin,
-  // our custom entry for react-refresh musts be injected
-  if (!chunk.entryModule || !/ReactRefreshEntry/.test(chunk.entryModule._identifier || '')) {
-    return source;
-  }
-
   const lines = source.split('\n');
 
   // Webpack generates this line whenever the mainTemplate is called

src/index.js

@@ -94,7 +94,37 @@ class ReactRefreshPlugin {
       compilation.mainTemplate.hooks.require.tap(
         this.constructor.name,
         // Constructs the correct module template for react-refresh
-        createRefreshTemplate
+        (source, chunk, hash) => {
+          const mainTemplate = compilation.mainTemplate;
+
+          // Check for the output filename
+          // This is to ensure we are processing a JS-related chunk
+          let filename = mainTemplate.outputOptions.filename;
+          if (typeof filename === 'function') {
+            // Only usage of the `chunk` property is documented by Webpack.
+            // However, some internal Webpack plugins uses other properties,
+            // so we also pass them through to be on the safe side.
+            filename = filename({
+              chunk,
+              hash,
+              //  TODO: Figure out whether we need to stub the following properties, probably no
+              contentHashType: 'javascript',
+              hashWithLength: length => mainTemplate.renderCurrentHashCode(hash, length),
+              noChunkHash: mainTemplate.useChunkHash(chunk),
+            });
+          }
+
+          // Check whether the current compilation is outputting to JS,
+          // since other plugins can trigger compilations for other file types too.
+          // If we apply the transform to them, their compilation will break fatally.
+          // One prominent example of this is the HTMLWebpackPlugin.
+          // If filename is falsy, something is terribly wrong and there's nothing we can do.
+          if (!filename || !filename.includes('.js')) {
+            return source;
+          }
+
+          return createRefreshTemplate(source, chunk);
+        }
       );
 
       compilation.hooks.finishModules.tap(this.constructor.name, modules => {