Webpack-bundle-analyzer: Finds stats but not rendering, console error: Uncaught FoamTree: element has zero dimensions

[esoyke]

Nothing rendered, getting error in console:

Uncaught FoamTree: element has zero dimensions: 0 x 0

Technical info

"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-server": "^2.10.1"

• Node 6.9.5
• npm 3.10.10
• OSX

Debug info

Ran: 'npm run bundle-report', with this in package.json scripts section: "bundle-report": "webpack-bundle-analyzer dist/stats.json"

It launches the web page and apparently finds the stats file, when hovering over the left area of the page it lists main and polyfills chunks of sizes 5.49MB and 300KB respectively. However the inline and scripts chunks are both listed as 0 bytes. This doesn't match the sizes of those bundles in reality, in the file system those bundles are 1KB and 168KB?

I build the app with:

ng build --prod --aot=true --stats-json

(Renamed stats.json as stats.txt to pass the upload filter, FYI it's big: 8.9MB)
stats.txt

[mjamesderocher]

I am getting the same error.

[valscion]

Are you able to see the report, even with incorrect sizes, or is the page only blank?

I was able to open the analyzer on the stats file you uploaded.

This issue sounds like a duplicate of #160 but I am not sure yet

[mjamesderocher]

The page is blank, but the sidebar is loading.

[valscion]

Does the sidebar allow you to change the size used? Or is the stats size visualization empty?

[mjamesderocher]

The sidebar allows you to change the size used. It has the checkboxes to let you select what chunks to show. When clicking to change the size used, the console gives the error "Treemap.jsx:106 Uncaught (in promise) TypeError: Cannot read property 'update' of null"

[mjamesderocher]

The situation that I am using it in is an example from the Next.js repo. It's possible that they have something set up wrong in their settings. I'm not sure, since this is the first time I tried to use webpack-bundle-analyzer.
https://github.com/zeit/next.js/tree/canary/examples/with-webpack-bundle-analyzer

[th0r]

The situation that I am using it in is an example from the Next.js repo

@mjamesderocher Example works for me. I did this:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-webpack-bundle-analyzer
cd with-webpack-bundle-analyzer
npm i
npm run analyze

What version of Node, npm and OS do you use?

[mjamesderocher]

I'm using Windows 10. Node version is 8.9.4. NPM is 5.6.0.

[th0r]

@mjamesderocher and commands above open broken report for you?

[mjamesderocher]

I got it working. I had been using Chrome, but I tried it in Firefox, and it is working. I tried it in Chrome in incognito mode, and it is working.

I tried clearing the cache for Chrome, but that didn't work.

I then tried turning off the Window Resizer Chrome extension, and it's working. That injects some code into the page, and must've been causing a conflict.

[mjamesderocher]

Sorry about that. You guys have been really nice to work through it with me. I appreciate it.

[valscion]

Great that the issue was resolved for you! @esoyke could you also try to open the report in incognito mode or another browser?

[esoyke]

Apologies for the late reply, I was offline a few days and didn't see the updates. I too use the Windows Resizer extension, that was the culprit. Disabling it or using Incognito resolved it. Thanks guys!

[valscion]

Thank you for confirming, @esoyke :relaxed: