Chunk contents are lost with some values of `output.libraryTarget`

[Hypnosphi]

Issue description

When using global, window, this, commonjs, commonjs2, or assign as output.libraryTarget, chunk contents are not displayed in report. var, umd, 'amd', 'amd-require', 'system', and 'jsonp' work OK.

Technical info

System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.35 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.2 - ~/n/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/n/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    webpack: ^4.43.0 => 4.43.0 
    webpack-bundle-analyzer: ^3.8.0 => 3.8.0 
    webpack-cli: ^3.3.12 => 3.3.12 

Reproduction

https://github.com/Hypnosphi/webpack-bundle-analyzer-repro

Expected

Actual

[valscion]

Can you add some reproduction steps in the reproduction repository? What commands do I need to run to get to the same result?

[Hypnosphi]

npm install && npm run build

[valscion]

I wonder if this is the expected result for libraryTarget: 'global'. You can however see the full sizes when using "stat" sizes.

The output bundle from the reproduction repository looks like so:

Details

window.MyLibrary = (function (e) {
  var t = {};
  function r(n) {
    if (t[n]) return t[n].exports;
    var o = (t[n] = { i: n, l: !1, exports: {} });
    return e[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports;
  }
  return (
    (r.m = e),
    (r.c = t),
    (r.d = function (e, t, n) {
      r.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n });
    }),
    (r.r = function (e) {
      "undefined" != typeof Symbol &&
        Symbol.toStringTag &&
        Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
        Object.defineProperty(e, "__esModule", { value: !0 });
    }),
    (r.t = function (e, t) {
      if ((1 & t && (e = r(e)), 8 & t)) return e;
      if (4 & t && "object" == typeof e && e && e.__esModule) return e;
      var n = Object.create(null);
      if (
        (r.r(n),
        Object.defineProperty(n, "default", { enumerable: !0, value: e }),
        2 & t && "string" != typeof e)
      )
        for (var o in e)
          r.d(
            n,
            o,
            function (t) {
              return e[t];
            }.bind(null, o)
          );
      return n;
    }),
    (r.n = function (e) {
      var t =
        e && e.__esModule
          ? function () {
              return e.default;
            }
          : function () {
              return e;
            };
      return r.d(t, "a", t), t;
    }),
    (r.o = function (e, t) {
      return Object.prototype.hasOwnProperty.call(e, t);
    }),
    (r.p = ""),
    r((r.s = 0))
  );
})([
  function (e, t, r) {
    "use strict";
    r.r(t);
    r(1);
  },
  function (e, t) {},
]);

The modules part of this bundle is the one after webpack setup code:

([
  function (e, t, r) {
    "use strict";
    r.r(t);
    r(1);
  },
  function (e, t) {},
]);

And when looking at this, it seems that indeed, only one module content is not blank there.

The webpack stats JSON looks like so:

Details

{
  "errors": [
  ],
  "warnings": [
  ],
  "version": "4.43.0",
  "hash": "275c73f1f4e37ddf824c",
  "time": 82,
  "builtAt": 1595486128923,
  "publicPath": "",
  "outputPath": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/dist",
  "assetsByChunkName": {
    "main": "main.js"
  },
  "assets": [
    {
      "name": "main.js",
      "size": 995,
      "chunks": [
        0
      ],
      "chunkNames": [
        "main"
      ],
      "info": {
      },
      "emitted": true
    }
  ],
  "filteredAssets": 0,
  "entrypoints": {
    "main": {
      "chunks": [
        0
      ],
      "assets": [
        "main.js"
      ],
      "children": {
      },
      "childAssets": {
      }
    }
  },
  "namedChunkGroups": {
    "main": {
      "chunks": [
        0
      ],
      "assets": [
        "main.js"
      ],
      "children": {
      },
      "childAssets": {
      }
    }
  },
  "chunks": [
    {
      "id": 0,
      "rendered": true,
      "initial": true,
      "entry": true,
      "size": 18,
      "names": [
        "main"
      ],
      "files": [
        "main.js"
      ],
      "hash": "226a5b72289872e0254f",
      "siblings": [
      ],
      "parents": [
      ],
      "children": [
      ],
      "childrenByOrder": {
      },
      "modules": [
        {
          "id": 0,
          "identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
          "name": "./src/index.js",
          "index": 0,
          "index2": 1,
          "size": 18,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],
          "issuer": null,
          "issuerId": null,
          "issuerName": null,
          "issuerPath": null,
          "failed": false,
          "errors": 0,
          "warnings": 0,
          "assets": [
          ],
          "reasons": [
            {
              "moduleId": null,
              "moduleIdentifier": null,
              "module": null,
              "moduleName": null,
              "type": "single entry",
              "userRequest": "./src",
              "loc": "main"
            }
          ],
          "usedExports": true,
          "providedExports": [
          ],
          "optimizationBailout": [
            "ModuleConcatenation bailout: Module is an entry point"
          ],
          "depth": 0,
          "source": "import './module'\n"
        },
        {
          "id": 1,
          "identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/module.js",
          "name": "./src/module.js",
          "index": 1,
          "index2": 0,
          "size": 0,
          "cacheable": true,
          "built": true,
          "optional": false,
          "prefetched": false,
          "chunks": [
            0
          ],
          "issuer": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
          "issuerId": 0,
          "issuerName": "./src/index.js",
          "issuerPath": [
            {
              "id": 0,
              "identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
              "name": "./src/index.js"
            }
          ],
          "failed": false,
          "errors": 0,
          "warnings": 0,
          "assets": [
          ],
          "reasons": [
            {
              "moduleId": 0,
              "moduleIdentifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
              "module": "./src/index.js",
              "moduleName": "./src/index.js",
              "type": "harmony side effect evaluation",
              "userRequest": "./module",
              "loc": "1:0-17"
            }
          ],
          "usedExports": false,
          "providedExports": null,
          "optimizationBailout": [
            "ModuleConcatenation bailout: Module is not an ECMAScript module"
          ],
          "depth": 1,
          "source": ""
        }
      ],
      "filteredModules": 0,
      "origins": [
        {
          "module": "",
          "moduleIdentifier": "",
          "moduleName": "",
          "loc": "main",
          "request": "./src",
          "reasons": [
          ]
        }
      ]
    }
  ],
  "modules": [
    {
      "id": 0,
      "identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
      "name": "./src/index.js",
      "index": 0,
      "index2": 1,
      "size": 18,
      "cacheable": true,
      "built": true,
      "optional": false,
      "prefetched": false,
      "chunks": [
        0
      ],
      "issuer": null,
      "issuerId": null,
      "issuerName": null,
      "issuerPath": null,
      "failed": false,
      "errors": 0,
      "warnings": 0,
      "assets": [
      ],
      "reasons": [
        {
          "moduleId": null,
          "moduleIdentifier": null,
          "module": null,
          "moduleName": null,
          "type": "single entry",
          "userRequest": "./src",
          "loc": "main"
        }
      ],
      "usedExports": true,
      "providedExports": [
      ],
      "optimizationBailout": [
        "ModuleConcatenation bailout: Module is an entry point"
      ],
      "depth": 0,
      "source": "import './module'\n"
    },
    {
      "id": 1,
      "identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/module.js",
      "name": "./src/module.js",
      "index": 1,
      "index2": 0,
      "size": 0,
      "cacheable": true,
      "built": true,
      "optional": false,
      "prefetched": false,
      "chunks": [
        0
      ],
      "issuer": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
      "issuerId": 0,
      "issuerName": "./src/index.js",
      "issuerPath": [
        {
          "id": 0,
          "identifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
          "name": "./src/index.js"
        }
      ],
      "failed": false,
      "errors": 0,
      "warnings": 0,
      "assets": [
      ],
      "reasons": [
        {
          "moduleId": 0,
          "moduleIdentifier": "/Users/vesa/code/muut/webpack-bundle-analyzer/issue-372-repro/src/index.js",
          "module": "./src/index.js",
          "moduleName": "./src/index.js",
          "type": "harmony side effect evaluation",
          "userRequest": "./module",
          "loc": "1:0-17"
        }
      ],
      "usedExports": false,
      "providedExports": null,
      "optimizationBailout": [
        "ModuleConcatenation bailout: Module is not an ECMAScript module"
      ],
      "depth": 1,
      "source": ""
    }
  ],
  "filteredModules": 0,
  "logging": {
    "webpack.buildChunkGraph.visitModules": {
      "entries": [
      ],
      "filteredEntries": 2,
      "debug": false
    }
  },
  "children": [
  ]
}

I'm not yet sure if the outcome for this reproduction is correct or not. The reproduction might need to have more contents in the modules (i.e. no empty source files) to see what's broken.

[valscion]

Ok when I put some more contents in the source files like so:

import './module';
console.log('This is index.js');

console.log("Hello from module.js");

and generate a JSON report with

new BundleAnalyzerPlugin({
  analyzerMode: 'json'
})

the generated JSON report looks like this:

[
  {
    "label": "main.js",
    "isAsset": true,
    "statSize": 89,
    "parsedSize": 1062,
    "gzipSize": 518,
    "groups": [
      {
        "label": "src",
        "path": "./src",
        "statSize": 89,
        "groups": [
          {
            "id": 0,
            "label": "index.js",
            "path": "./src/index.js",
            "statSize": 52
          },
          {
            "id": 1,
            "label": "module.js",
            "path": "./src/module.js",
            "statSize": 37
          }
        ],
        "parsedSize": 0,
        "gzipSize": 0
      }
    ]
  }
]

while the bundled output modules looked like so:

([
  function (e, r, t) {
    "use strict";
    t.r(r);
    t(1);
    console.log("This is index.js");
  },
  function (e, r) {
    console.log("Hello from module.js");
  },
])

So the report does seem to indicate (with the lack of parsedSize and gzipSize for all files in sub-groups) that webpack-bundle-analyzer is unable to find the modules from the bundle output here.

[valscion]

We might want to incorporate all of the different libraryTarget outputs from Hypnosphi/webpack-bundle-analyzer-repro#1 and test against them, so that we always use the same source files and the only change that happens is what output.libraryTarget is.

[hereisfun]

Has there been any progress? So far I use source-map-explorer instead, but it's not accurate enough. Hoping to see a bugfix soon, because webpack-bundle-analyzer is very useful :)

[valscion]

Nowadays we're able to test running with different webpack versions.

I'd be happy to see a PR that adds test coverage for all the different libraryTarget values so we could get the infrastructure ready for further bundle parser development ☺️

[Menny1337]

Verified against current main (23adc7a) with Webpack 5.105.2. A generated Webpack-native UMD fixture contained module IDs 447 and 956, but parseBundle() returned no modules.

Prepending an unrelated zero-argument IIFE with a plausible module map caused the parser to return only decoy ID 999. The parser therefore needs both nested UMD discovery and validation before selecting a candidate. The existing 22 parser tests still pass.

#685 tightened IIFE detection but does not cover this nested shape or competing candidates.

I can submit a focused PR with generated UMD and decoy regression fixtures. I’ll keep its scope to Webpack-native nested UMD discovery and safe candidate validation, without adding sequence-expression support.