Prevent duplicate asset emission and avoid rebuild loops in Webpack configuration

Author: valentinpalkovic

code/builders/builder-webpack5/src/plugins/webpack-inject-mocker-runtime-plugin.ts

@@ -59,17 +59,17 @@ export class WebpackInjectMockerRuntimePlugin {
 
             // Use the documented `emitAsset` method to add the pre-bundled runtime script
             // to the compilation's assets. This is the standard Webpack way.
-            compilation.emitAsset(
-              runtimeAssetName,
-              new compiler.webpack.sources.RawSource(runtimeScriptContent)
-            );
+            if (!compilation.getAsset(runtimeAssetName)) {
+              compilation.emitAsset(
+                runtimeAssetName,
+                new compiler.webpack.sources.RawSource(runtimeScriptContent)
+              );
+              data.assets.js.unshift(runtimeAssetName);
+            }
 
             // Prepend the name of our new asset to the list of JavaScript files, once.
             // HtmlWebpackPlugin will automatically create a <script> tag for it
             // and place it at the beginning of the body scripts.
-            if (!data.assets.js.includes(runtimeAssetName)) {
-              data.assets.js.unshift(runtimeAssetName);
-            }
             cb(null, data);
           } catch (error) {
             // In case of an error (e.g., file not found), pass it to Webpack's compilation.

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -1,4 +1,4 @@
-import { dirname, join, resolve } from 'node:path';
+import { join, posix, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 import {
@@ -126,7 +126,8 @@ export default async (
       logging: 'error',
     },
     watchOptions: {
-      ignored: /node_modules/,
+      // Ignore node_modules and the output directory to avoid rebuild loops
+      ignored: ['**/node_modules', posix.resolve(workingDir, outputDir)],
     },
     externals,
     ignoreWarnings: [