Errors when using with the webpack dev server 4

[zdm]

Issue description

I got errors when using bundle analyzer wit the webpack dev server 4.

Error parsing bundle asset "d:\projects\devel\rankrocket\app\www\js\app.a49e5464.js": no such file
Error parsing bundle asset "d:\projects\devel\rankrocket\app\www\js\pdfmake.d2d0b128.js": no such file
Error parsing bundle asset "d:\projects\devel\rankrocket\app\www\js\vendors.aa8b04ed.js": no such file
Error parsing bundle asset "d:\projects\devel\rankrocket\app\www\js\private.18a4a042.js": no such file
Error parsing bundle asset "d:\projects\devel\rankrocket\app\www\js\public.6ce47ae2.js": no such file
Error parsing bundle asset "d:\projects\devel\rankrocket\app\www\js\node_modules_fortawesome_fontawesome-free_css_all_min_css.2124fe27.js": no such file
Webpack Bundle Analyzer is started at http://127.0.0.1:8888

This happens only, when running under dev server, regular build completes normally.

Technical info

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 5.88 GB / 15.78 GB
  Binaries:
    Node: 16.10.0 - d:\devel\node\node.exe
    npm: 7.20.2 - ~\.npm\npm.cmd

webpack: 5.55.1
webpack-dev-server: 4.3.0
webpack-bundle-analyzer: 4.4.2

Debug info

I am using it as plugin with the following options:

new BundleAnalyzerPlugin( {
        "analyzerMode": process.env.WEBPACK_DEV_SERVER ? "server" : "static",
        "analyzerPort": 8888,
        "openAnalyzer": false,
})

What other Webpack plugins were used?

html-webpack-plugin
copy-webpack-plugin
terser-webpack-plugin
case-sensitive-paths-webpack-plugin
mini-css-extract-plugin
css-minimizer-webpack-plugin

[alexander-akait]

Please provide reproducible test repo

[zdm]

Here is the minimal project to repro this issue:
https://github.com/zdm/webpack-bundle-analyzer-issue-471

npm i
npx webpack-dev-server

See errors:

...
Error parsing bundle asset "d:\downloads\webpack-bundle-analyzer-issue-471\www\js\vendors.1989a8af.js": no such file
Error parsing bundle asset "d:\downloads\webpack-bundle-analyzer-issue-471\www\js\app.f747955a.js": no such file

...

[alexander-akait]

You are on windows, but uses https://github.com/zdm/webpack-bundle-analyzer-issue-471/blob/main/webpack.config.js#L17 (i.e. /), please use path.resolve(__dirname, '/www')

[zdm]

I updated code to use path.resolve. Results are the same.

…

On 02.10.2021 19:06, Alexander Akait wrote: |path.resolve(__dirname, '/www')|

[zdm]

Under linux results are the same too.
The problem is not in the paths separators.

[alexander-akait]

Yep, I see, investigating

[alexander-akait]

@valscion Found a bug, we should use compiler.outputFilesystem, not fs to be compatibility with dev server and not only (because other plugins can override fs)

[valscion]

You mean this code?

webpack-bundle-analyzer/src/parseUtils.js

Lines 10 to 11 in 194c62d

	function parseBundle(bundlePath) {
	const content = fs.readFileSync(bundlePath, 'utf8');

[alexander-akait]

@valscion Yes 👍

[zdm]

Is it fixable?

[valscion]

It's likely that it's fixable. It would require adding more test coverage to make sure the fix would not regress in the future and we don't have much tests for webpack-dev-server integration yet so it's not a straightforward task.

That's why I haven't had time to fix this yet. Feel free to try to fix it and provide a PR if it would be important to you for this bug to be fixed ☺️

[zdm]

This can be problematic for me because I am not in the context of this project.
I can help in testing.
Will wait, no other way...