stats.json file is not consumable by https://webpack.github.io/analyse/

[natalan]

Current Behavior

Running the build on NX 15 with a sample app

andrei@Andreis-MBP test152 % nx build testapp --statsJson
> nx run testapp:build:production --statsJson

(node:68391) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by status 768 KiB [big]
  asset stats.json 522 KiB [emitted] [big]
  asset main.6f435b517ddca0b4.js 246 KiB [emitted] [immutable] [big] (name: main)
asset 3rdpartylicenses.txt 20.1 KiB [emitted]
asset favicon.ico 14.7 KiB [emitted] [from: apps/testapp/src/favicon.ico] [copied]
asset runtime.3adde3ee484dc5b6.js 7.35 KiB [emitted] [immutable] (name: runtime)
asset assets/.gitkeep 0 bytes [emitted] [from: apps/testapp/src/assets/.gitkeep] [copied]
Entrypoint main [big] 253 KiB = runtime.3adde3ee484dc5b6.js 7.35 KiB main.6f435b517ddca0b4.js 246 KiB
orphan modules 126 KiB [orphan] 26 modules
runtime modules 4.15 KiB 6 modules
cacheable modules 255 KiB
  modules by path ./node_modules/react/ 7.98 KiB 4 modules
  modules by path ./node_modules/react-dom/ 131 KiB
    ./node_modules/react-dom/client.js 619 bytes [built] [code generated]
      3172 ms ->
      140 ms (resolving: 36 ms, restoring: 0 ms, integration: 0 ms, building: 104 ms, storing: 0 ms)
    + 2 modules
  modules by path ./node_modules/hoist-non-react-statics/ 5.36 KiB
    ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js 2.68 KiB [built] [code generated]
      3172 ms -> 160 ms ->
      0 ms (resolving: 0 ms, restoring: 0 ms, integration: 0 ms, building: 0 ms, storing: 0 ms, additional resolving: 4 ms)
    + 2 modules
  modules by path ./node_modules/scheduler/ 4.33 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
      3172 ms -> 140 ms -> 73 ms -> 142 ms ->
      48 ms (resolving: 27 ms, restoring: 0 ms, integration: 0 ms, building: 21 ms, storing: 0 ms)
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.14 KiB [built] [code generated]
      3172 ms -> 140 ms -> 73 ms -> 142 ms -> 48 ms ->
      0 ms (resolving: 0 ms, restoring: 0 ms, integration: 0 ms, building: 0 ms, storing: 0 ms)
  ./apps/testapp/src/main.tsx + 21 modules 106 KiB [built] [code generated]

LOG from webpack.Compilation.ModuleProfile
<e>  |  | 3135 ms build modules > ./apps/testapp/src/main.tsx
<e>  | 3167 ms build modules > 3 x javascript/auto with ./node_modules/@nrwl/webpack/src/utils/web-babel-loader.js??ruleSet[1].rules[2]
<e> 3399 ms build modules
+ 17 hidden lines

webpack 5.75.0 compiled successfully in 3961 ms

 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Successfully ran target build for project testapp (15s)
 
         With additional flags:
           --statsJson=true

Then loading stats.json file into https://webpack.github.io/analyse/ throws

web.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'sort')
    at web.js:1:377
    at n.load (web.js:1:2149)
    at l.onload (15f6448ec2a08f35395d.js:1:401)

Expected Behavior

The stats.file is parsable by https://webpack.github.io/analyse/

GitHub Repo

No response

Steps to Reproduce

1. Generate stats file with nx run testapp:build:production --statsJson
2. Load the stats.json file to https://webpack.github.io/analyse/
3. See error in the console

Nx Report

Node : 16.14.2
   OS   : darwin x64
   npm  : 8.5.0
   
   nx : 15.6.1
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.6.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.6.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.6.1
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.6.1
   @nrwl/js : 15.6.1
   @nrwl/linter : 15.6.1
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.6.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : Not Found
   @nrwl/web : Not Found
   @nrwl/webpack : 15.6.1
   @nrwl/workspace : 15.6.1
   @nrwl/vite : Not Found
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

No response

Additional Information

https://webpack.js.org/configuration/stats/#statsmodules

[jaysoo]

We're looking into it, for now you can also use this to analyze.

npx webpack-bundle-analyzer dist/<project>/stats.json

[jaysoo]

Looks like the analyze web tool is not compatible with Webpack 5, and the project appears to be unmaintained.

webpack/analyse#40 (comment)

Use webpack-bundle-analyzer instead.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.