fix: populate changeset, preserve child compilations via WeakMap, and improve coverage

Author: ronakmaheshwari

.changeset/fix-child-compilations-type-error.md

@@ -0,0 +1,5 @@
+---
+"webpack-bundle-analyzer": patch
+---
+
+Fix `TypeError: Cannot read property 'forEach' of undefined` when child compilations or entrypoints have undefined or missing assets.

src/analyzer.js

@@ -84,7 +84,7 @@ function flatten(arr) {
  * @returns {StatsCompilation | undefined} child asset compilation
  */
 function getChildAssetBundles(children, assetName) {
-  return (children || []).find((child) => {
+  return children.find((child) => {
     if (!child) return false;
     if (
       Array.isArray(child.assets) &&
@@ -285,6 +285,8 @@ function getViewerData(bundleStats, bundleDir, opts) {
   const allChildren = Array.isArray(bundleStats.children)
     ? [...bundleStats.children]
     : [];
+  /** @type {WeakMap<StatsAsset, StatsCompilation>} */
+  const childAssetBundles = new WeakMap();
 
   // Sometimes all the information is located in `children` array (e.g. problem in #10)
   if (
@@ -301,19 +303,20 @@ function getViewerData(bundleStats, bundleDir, opts) {
     // Sometimes if there are additional child chunks produced add them as child assets,
     // leave the 1st one as that is considered the 'root' asset.
     for (let i = 1; i < allChildren.length; i++) {
-      for (const asset of allChildren[i]?.assets || []) {
+      const child = allChildren[i];
+      for (const asset of child?.assets || []) {
+        childAssetBundles.set(asset, child);
         asset.isChild = true;
         bundleStats.assets.push(asset);
       }
     }
   } else if (allChildren.length > 0) {
-    bundleStats.assets = Array.isArray(bundleStats.assets)
-      ? [...bundleStats.assets]
-      : [];
+    bundleStats.assets = [.../** @type {StatsAsset[]} */ (bundleStats.assets)];
 
     // Sometimes if there are additional child chunks produced add them as child assets
     for (const child of allChildren) {
       for (const asset of child?.assets || []) {
+        childAssetBundles.set(asset, child);
         asset.isChild = true;
         bundleStats.assets.push(asset);
       }
@@ -424,7 +427,9 @@ function getViewerData(bundleStats, bundleDir, opts) {
 
     if (statAsset.isChild) {
       // Preserve child-compilation matching because child assets use a different module list.
-      const assetBundles = getChildAssetBundles(allChildren, statAsset.name);
+      const assetBundles =
+        childAssetBundles.get(statAsset) ||
+        getChildAssetBundles(allChildren, statAsset.name);
       /** @type {StatsModule[]} */
       const modules = assetBundles ? getBundleModules(assetBundles) : [];
       assetModules = modules.filter((statModule) =>

test/analyzerUtils.js

@@ -329,4 +329,170 @@ describe("getViewerData", () => {
     const chartData = getViewerData(stats);
     expect(chartData[0].isInitialByEntrypoint).toEqual({ main: true });
   });
+
+  it("handles entrypoint assets with empty or null items", () => {
+    const stats = {
+      assets: [
+        {
+          name: "bundle.js",
+          size: 100,
+          chunks: [1],
+        },
+      ],
+      chunks: [
+        {
+          id: 1,
+          modules: [
+            {
+              id: 1,
+              identifier: "./bundle.js",
+              name: "./bundle.js",
+              size: 50,
+              chunks: [1],
+            },
+          ],
+        },
+      ],
+      entrypoints: {
+        main: {
+          name: "main",
+          assets: [null, { name: "" }, "bundle.js"],
+        },
+      },
+    };
+
+    const chartData = getViewerData(stats);
+    expect(chartData[0].isInitialByEntrypoint).toEqual({ main: true });
+  });
+
+  it("handles null or undefined entries in children array", () => {
+    const stats = {
+      children: [
+        null,
+        {
+          name: "child",
+          assets: [
+            {
+              name: "bundle.js",
+              size: 100,
+              chunks: [1],
+            },
+          ],
+          chunks: [
+            {
+              id: 1,
+              modules: [
+                {
+                  id: 1,
+                  identifier: "./bundle.js",
+                  name: "./bundle.js",
+                  size: 50,
+                  chunks: [1],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const chartData = getViewerData(stats);
+    expect(chartData).toHaveLength(1);
+    expect(chartData[0].label).toBe("bundle.js");
+  });
+
+  it("resolves pre-marked isChild assets via getChildAssetBundles fallback", () => {
+    const stats = {
+      assets: [
+        {
+          name: "fallback.js",
+          size: 100,
+          chunks: [1],
+          isChild: true,
+        },
+      ],
+      children: [
+        null,
+        {
+          name: "empty-child",
+          assets: [],
+          // no assetsByChunkName to exercise empty fallback
+        },
+        {
+          name: "child",
+          assets: [
+            {
+              name: "fallback.js",
+              size: 100,
+              chunks: [1],
+            },
+          ],
+          chunks: [
+            {
+              id: 1,
+              modules: [
+                {
+                  id: 1,
+                  identifier: "./fallback-module.js",
+                  name: "./fallback-module.js",
+                  size: 50,
+                  chunks: [1],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const chartData = getViewerData(stats);
+    expect(chartData).toHaveLength(1);
+    expect(chartData[0].label).toBe("fallback.js");
+    expect(chartData[0].groups[0].label).toBe("fallback-module.js");
+  });
+
+  it("handles null or undefined bundleStats gracefully", () => {
+    expect(getViewerData(null)).toEqual([]);
+    expect(getViewerData(undefined)).toEqual([]);
+  });
+
+  it("resolves child assets by assetsByChunkName when assets array is not present", () => {
+    const stats = {
+      assets: [
+        {
+          name: "chunk-asset.js",
+          size: 100,
+          chunks: [1],
+          isChild: true,
+        },
+      ],
+      children: [
+        {
+          name: "legacy-child",
+          assetsByChunkName: {
+            main: ["chunk-asset.js"],
+          },
+          chunks: [
+            {
+              id: 1,
+              modules: [
+                {
+                  id: 1,
+                  identifier: "./chunk-mod.js",
+                  name: "./chunk-mod.js",
+                  size: 50,
+                  chunks: [1],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const chartData = getViewerData(stats);
+    expect(chartData).toHaveLength(1);
+    expect(chartData[0].label).toBe("chunk-asset.js");
+    expect(chartData[0].groups[0].label).toBe("chunk-mod.js");
+  });
 });