Analyzer getting parsing errors after upgrade to Webpack 5 for edge cases

[hasan-wajahat]

Issue description

I had been easily creating analyzer reports with my very old configuration of laravel-mix 2 (running webpack 2 underneath). Finally I have managed to upgrade our config to laravel mix 6 (running webpack 5). Webpack is correctly creating all my bundles and webpack-bundle-analyzer even creates a proper report for this configuration. But the anazlyer is also throwing the following errors:

Error parsing bundle asset "/Users/hasan/Web_Projects/idf/IDF-web/public/js/components/payment/checkoutForm.js": Cannot read property 'arguments' of undefined
Error parsing bundle asset "/Users/hasan/Web_Projects/idf/IDF-web/public/js/pages/designLeague/coach_panel.js": Cannot read property 'arguments' of undefined
Error parsing bundle asset "/Users/hasan/Web_Projects/idf/IDF-web/public/js/pages/designLeague/member_panel.js": Cannot read property 'arguments' of undefined
Error parsing bundle asset "/Users/hasan/Web_Projects/idf/IDF-web/public/js/pages/paymentMethods/create.js": Cannot read property 'arguments' of undefined
Error parsing bundle asset "/Users/hasan/Web_Projects/idf/IDF-web/public/js/pages/members/studentProfile.js": Cannot read property '0' of undefined

Sadly I don't get any more errors that would give me a clue why bundle is failing.

I think my issue is similar to problems mentioned in #327

Technical info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 940.84 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - ~/.yarn/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    brotli-webpack-plugin: ^1.1.0 => 1.1.0 
    browser-sync-webpack-plugin: ^2.3.0 => 2.3.0 
    webpack-bundle-analyzer: ^4.3.0 => 4.3.0 

Debug info

I am using it as a plugin and here is how I run it:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
           new BundleAnalyzerPlugin({
                analyzerMode: 'static',
                reportFilename: `${path.resolve(__dirname, 'public/storage/bundle-analyzer')}/app-${DOTENV.APP_VERSION}.html`,
                openAnalyzer: false,
            }),
  ]
}

What other Webpack plugins were used?
I am not explicitly using any more plugins but laravel mix under the hood is using plugins for minification and versioning etc..

The stats file is attached below. Also no exception was thrown while creation of the stats file based on your recommended method (with analyzer disabled and source: false).

stats.json.zip

[hasan-wajahat]

So just wanted to share that the I am no longer seeing this error after I started using optimization.runtimeChunk. Now my config is like this for optimization:

optimization: {
        runtimeChunk: {
            name: 'js/runtime'
        },
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/](jquery|foundation-sites|foundation-datepicker|intersection-observer)[\\/]/,
                    name: 'js/vendor',
                    chunks: 'all',
                },
            },
        },
    }

I don't know if this issue should be closed based on this or whether bundle should work even if no special runtime file is created.
Also a point to note is that I needed an explicit runtime file because I have multiple entry point js files for single pages in my app.

[gian1200]

Not sure if related or not, but I'm having the same behaviour (error in log with correct Webpack build and report generation).

In my case, it is triggered when adding ESM support to Webpack configuration:

...
"experiments": {
	"outputModule": true,
},
"output": {
	"clean": true,
	"module": true,
	"path": join(import.meta.dirname, "../dist/public")
},
...

I have 5 entries, and 1 error line per Entry::

Error parsing bundle asset "<Path of output of entry 1>": Cannot read properties of undefined (reading 'arguments')
Error parsing bundle asset "<Path of output of entry 2>": Cannot read properties of undefined (reading 'arguments')
Error parsing bundle asset "<Path of output of entry 3>": Cannot read properties of undefined (reading 'arguments')
Error parsing bundle asset "<Path of output of entry 4>": Cannot read properties of undefined (reading 'arguments')
Error parsing bundle asset "<Path of output of entry 5>": Cannot read properties of undefined (reading 'arguments')

 System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1145G7 @ 2.60GHz
    Memory: 2.54 GB / 15.71 GB
  Binaries:
    Node: 22.14.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (137.0.3296.93)
    Internet Explorer: 11.0.26100.1882
  Packages:
    copy-webpack-plugin: ^13.0.0 => 13.0.0
    css-minimizer-webpack-plugin: ^7.0.2 => 7.0.2
    html-webpack-plugin: ^5.6.3 => 5.6.3
    webpack: ^5.99.9 => 5.99.9
    webpack-bundle-analyzer: ^4.10.2 => 4.10.2
    webpack-cli: ^6.0.1 => 6.0.1
    webpack-merge: ^6.0.1 => 6.0.1

[valscion]

I wonder if #649 has already resolved your issue @gian1200

Do try out the current unreleased version if it works.

[gian1200]

Oh, I saw that PR, but thought that it was already released. Will try to test it during the day/week (will need to read how to depend on unreleased code, first).

---

Update

How can I add it to my dependencies?

I tried this in the package.json without success:

"webpack-bundle-analyzer": "git@github.com/webpack-contrib/webpack-bundle-analyzer.git#5d37dc35172906a1bc916de9d434afbe4820ed3f"

[gian1200]

@valscion, after manually reinventing the wheel, I was able to do it.

The error still appears. The issue happens here, line 338:

webpack-bundle-analyzer/src/parseUtils.js

Lines 332 to 352 in 5d37dc3

	const isOptimizedArray = (node.type === 'CallExpression');
	if (node.type === 'ArrayExpression' || isOptimizedArray) {
	// Modules array or optimized array
	const minId = isOptimizedArray ?
	// Get the [minId] value from the Array() call first argument literal value
	node.callee.object.arguments[0].value :
	// `0` for simple array
	0;
	const modulesNodes = isOptimizedArray ?
	// The modules reside in the `concat()` function call arguments
	node.arguments[0].elements :
	node.elements;
	return modulesNodes.reduce((result, moduleNode, i) => {
	if (moduleNode) {
	result[i + minId] = getModuleLocation(moduleNode);
	}
	return result;
	}, {});
	}

console.log(node):

Node {
  type: 'CallExpression',
  start: 20071,
  end: 20148,
  callee: Node {
    type: 'Identifier',
    start: 20071,
    end: 20090,
    name: '__webpack_require__'
  },
  arguments: [
    Node {
      type: 'Literal',
      start: 20120,
      end: 20147,
      value: './**/file.mjs', // edited
      raw: '"./**/file.mjs"' // edited
    }
  ],
  optional: false
}

Reason

• node.callee.object is undefined
• node.arguments[0] exists, but node.arguments[0].elements or node.elements don't?
• I also noticed that if "module mode" is not configured, then these lines are not executed.

[alexander-akait]

@gian1200 Can you provide code that we try to parser (feel free to update like a file or gist if it is large)

[gian1200]

I'll try to build a reproducer 👍🏻

[gian1200]

Sorry for the delay.

Please find the reproducer in the following link https://github.com/gian1200/webpack-bundle-analyzer-reproducer-409.

Steps

npm install
npm run build

Expected output

PS C:\<path-to-project>\webpack-bundle-analyzer-reproducer-409> npm run build                                               

> webpack-bundle-analyzer-reproducer-409@1.0.0 build
> npm run build:dev


> webpack-bundle-analyzer-reproducer-409@1.0.0 build:dev
> webpack --config .config/webpack.dev.mjs

Error parsing bundle asset "C:\<path-to-project>\webpack-bundle-analyzer-reproducer-409\dist\public\index.mjs": Cannot read properties of undefined (reading 'arguments')

No bundles were parsed. Analyzer will show only original module sizes from stats file.

Webpack Bundle Analyzer saved report to C:\<path-to-project>\webpack-bundle-analyzer-reproducer-409\target\webpack\app_report.html
app:
  asset index.mjs 3.28 KiB [emitted] [javascript module] (name: reproducerEntry) 1 related asset
  runtime modules 670 bytes 3 modules
  cacheable modules 173 bytes
    ./src/app/index.mjs 115 bytes [built] [code generated]
    ./src/app/anotherFile.mjs 58 bytes [built] [code generated]
  app (webpack 5.101.0) compiled successfully in 480 ms

[alexander-akait]

@gian1200 Thanks for the report, yeah, there is a bug, we need improve parsing es modules here