Webpack-bundle-analyzer: Cannot parse bundle

[jfrolich]

Issue description

error:

Couldn't parse bundle asset "/Users/Jaap/Documents/development/cogo/backend/priv/static/js/d9e28418.chunk.js".
Analyzer will use module sizes from stats file.

Technical info

• Webpack Bundle Analyzer version: 2.11.1
• Webpack version: 4.5.0

Debug info

bundle supplied here: https://gist.github.com/jfrolich/b0e934b6645edfc116103b09b72a08bd

[valscion]

Hi, thanks for opening an issue :) this could be a parsing bug in webpack-bundle-analyzer.

Could you also upload your stats JSON file? We'll need that to reproduce your issue

[vinnymac]

@jfrolich I had the same error today with the same versions of webpack and this tool. The errors disappeared by supplying webpack-bundle-analyzer with a directory path.

For example
webpack-bundle-analyzer stats.json dist/

Give it a try, and let me know if it helps at all.

[romanlex]

I can confirm problem today(
My stats.json

stats.zip

[Cu3PO42]

I have also experienced this problem. I can unfortunately not share the code or stats file due to licensing issues, but here are a couple observations from the project:

1. The build creates roughly 35 chunks, however webpack-bundle-analyzer only says that it cannot parse one particular bundle (which is a dynamically loaded chunk).
2. While changing code, the issue sometimes "changed files", i.e. occurred in a different file than before.
3. The issue did not occur before using code splitting.

Here are the first and last module(s) from the offending bundle in hopes that it helps:

(window.webpackJsonp=window.webpackJsonp||[]).push([[3],Array(47).concat([function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var a,o=t(547),i=(a=o)&&a.__esModule?a:{default:a};n.default=i.default,e.exports=n.default},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,n,t){"use strict";t(1039),t(554),t(180),t(92),t(289),t(228),t(550)},

function(e,n,t){var a=t(553);"string"==typeof a&&(a=[[e.i,a,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};t(23)(a,o);a.locals&&(e.exports=a.locals)}])]);

[SethDavenport]

I'm running into the same issue since upgrading webpack from 3.5.5 to 4.6.0. My guess is that it is related to how webpack 4 does bundle splitting; Previously I was using CommonsChunkPlugin to generate app and vendor bundles and the analyzer worked fine.

Since commons chunk plugin is no longer a thing with webpack 4, I added this to my webpack.config.js to achieve a similar result:

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    },
  },

If I remove this config, bundle analyzer works fine but I only get one enormous app.js. If I keep the config, I get the app and vendor splitting that I need, but webpack-bundle-analyzer gives me

Couldn't parse bundle asset "/Users/sdavenport/code/wealthsimple/terminal/build/dist/app-752436a7751cc885da7d.js".
Analyzer will use module sizes from stats file.

[SethDavenport]

Do you need more repro details? Let me know and I'll cook up an example repo.

[SethDavenport]

Actually I just stumbled across something odd that seems related.

Initially I had this in my webpack config:

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    },
  },

I copied that regex from the webpack docs: https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks

However I was in there tweaking something else and I was like "that regex seems overly complex" so I changed it to this:

          test: /\/node_modules\//,

... and now bundle analyzer works!

I flipped it back and forth a couple times for the sake of paranoia and it seems that:

          test: /[\\/]node_modules[\\/]/, // parse error, stat sizes only

          test: /\/node_modules\//, // works fine

🤷‍♂️

[jfrolich]

Ah I have that regex in my config too! Nice find!

[valscion]

Ok nice! Great to hear that this is related to having a specific kind of config, and that it can be fixed on the application side before we get to fix it here.

I think we have enough details to be able to reproduce this, but if anyone could create a small reproduction repository for this, we'd be in an even better position :+1:

[th0r]

Should be fixed in v2.11.2

[sandrocsimas]

@th0r @valscion
Could you please take a look at this file? I'm getting the same error, even following what members above discovered.

build-stats.json.tar.gz

Here is my optimization config:
javascript const optimization = { splitChunks: { cacheGroups: { vendor: { name: 'vendor', test: /\/node_modules\//, chunks: 'all', priority: 0, enforce: true, }, }, }, };

[valscion]

@sandrocsimas please open a new issue and fill the issue template

[lixiushan]

is there a solution to fix it

[valscion]

This issue is fixed. @lixiushan please open a new issue with information we ask in the issue template if you still face problems.