Error parsing bundle asset no such file - Исправление ошибок и поиск оптимальных решений проблем

webpack.config.js:

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var AudioSpritePlugin = require("webpack-audio-sprite-plugin");
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
    entry: resolve(__dirname,'src', 'main.js'),
    output: {
        path: resolve(__dirname, 'build'),
        filename: 'main.[contenthash].js'
    },
    module: {
        rules: [
            { 
                test: /.css$/, 
                use: [MiniCssExtractPlugin.loader, 'css-loader'] 
            },
            { 
                test: /.mp3$/, 
                loader: AudioSpritePlugin.loader() 
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({template: resolve(__dirname, 'index.html')}),
        new MiniCssExtractPlugin({ 
            filename: '[name].[contenthash].css'
        }),
        new BundleAnalyzerPlugin(),
        new AudioSpritePlugin()
    ] 
};

main.js:

import "./changeTab.js";
import "./datecalc.js";
import "./timer.js";
import "../styles/main.css";

package.json

{
    "name": "sample-gulp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --mode=development",
        "build": "webpack --mode=production",
        "serve": "webpack serve --mode=production",
        "test": "echo"Error: no test specified" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "luxon": "^1.26.0"
    },
    "devDependencies": {
        "css-loader": "^5.2.4",
        "html-webpack-plugin": "^5.3.1",
        "mini-css-extract-plugin": "^1.5.0",
        "webpack": "^5.35.1",
        "webpack-audio-sprite-plugin": "^0.1.0",
        "webpack-bundle-analyzer": "^4.4.1",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2"
    }
}

ошибка при попытке сборки dev версии:

> sample-gulp@1.0.0 dev D:studyfrontendbundlersles1ts1
> webpack --mode=development

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use 127.0.0.1:8888       
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)        
    at listenInCluster (net.js:1366:12)
    at doListen (net.js:1503:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1345:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '127.0.0.1',
  port: 8888
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample-gulp@1.0.0 dev: `webpack --mode=development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-gulp@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UserselenaAppDataRoamingnpm-cache_logs2021-04-24T18_32_57_706Z-debug.log

и при production:

> sample-gulp@1.0.0 build D:studyfrontendbundlersles1ts1
> webpack --mode=production

Error parsing bundle asset "D:studyfrontendbundlersles1ts1buildmain.71de5633ea08b589f344.js": no such file

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

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use 127.0.0.1:8888       
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)        
    at listenInCluster (net.js:1366:12)
    at doListen (net.js:1503:7)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1345:8)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  port: 8888
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample-gulp@1.0.0 build: `webpack --mode=production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-gulp@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UserselenaAppDataRoamingnpm-cache_logs2021-04-24T18_31_37_842Z-debug.log

Источник

Solant

Error parsing bundle asset «*» no such file when mixing relative paths

Looks like mixing paths for output stats.json and webpack entries causes this error.

Technical info

Webpack Bundle Analyzer version: 3.0.2
Webpack version: 4.6.15
Node.js version: 10.11.0
npm/yarn version: 6.4.1
OS: Archlinux

Debug info

Bundle analyzer is launched as npm script:
webpack --profile --json > dist/stats.json && webpack-bundle-analyzer dist/stats.json

And webpack entries look like that:

    entry: {
        'otherplace/bundle1': ['*', '*'],
        'otherplace/bundle2': '*',
        'otherplace/bundle3': '*',
        'dist/bundle4': '.*',
        'dist/bundle5': '.*',
    },

So, when
webpack --profile --json > dist/stats.json && webpack-bundle-analyzer dist/stats.json
Errors like

Error parsing bundle asset "<absolute path>/dist/dist/bundle5.js": no such file (/dist/ appear twice)
Error parsing bundle asset "<absolute path>/dist/otherplace/bundle2": no such file (should be no /dist/, only /otherplace/)

appear, and no parsed size (only stat size) available, but when using
webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json
everything works fine

Thanks for the great tool.

Other similar tools have a website where you can just upload the webpack-generated stats.json file to, and see the visualization there, no installation required.

This library’s visualization is better than the others’ imo, and it’s the most popular. It’d be nice if people had a convenient way to test it out.

jbjhjm

Issue description

Angular production bundles use the encoded ɵ char (u0275) for Ivy-generated methods.
In some cases, acorn parser will falsy detect use of a reserved keyword and throw a SyntaxError.
(happens in source code bits like let u0275FaqFrontendFeature_BaseFactory, seems the leading u0275 makes acorn not detect the variable name, let will be treated as whole statement, which would be erronous.)

Technical info

This is stripped down content of an angular chunk file which would make webpack-bundle-analyzer fail because acorn throws an error.

"use strict";
(self.webpackChunkmpf_frontend = self.webpackChunkmpf_frontend || []).push([
	[573], {
		83302: (__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
			return function () {
				let u0275ProgressBar_BaseFactory;
			}()
		},
	}
]);

Proposed solution

It is not webpack-bundle-analyzer’s task to validate source files.
Because of that, I propose to update the configuration of acorn parse runner to tolerate such errors and not throw.

In parseUtils.parseBundle, the acorn.parse options object can be detailed by setting allowReserved:true.
This will make acorn tolerate reserved keywords and analyzation can continue.

function parseBundle(bundlePath) {
  const content = fs.readFileSync(bundlePath, 'utf8');
  const ast = acorn.parse(content, {
    sourceType: 'script',
	allowReserved:true,
    // I believe in a bright future of ECMAScript!
    // Actually, it's set to `2050` to support the latest ECMAScript version that currently exists.
    // Seems like `acorn` supports such weird option value.
    ecmaVersion: 2050
  });
  // ...

Issue description

I’m getting a console error using yarn serve

Error parsing bundle asset "C:bundle_analyzer_testdistjschunk-vendors.js": no such file
Error parsing bundle asset "C:bundle_analyzer_testdistjsapp.js": no such file
Error parsing bundle asset "C:bundle_analyzer_testdistjsabout.js"": no such file

Although the BundleAnalyzerPlugin itself displays all modules correctly in both (yarn serve/ yarn build)
No console errors occur when using yarn build.

Technical info

  System:
    OS: Windows 10 10.0.17763
    CPU: (2) x64 Intel(R) Celeron(R) CPU G3930 @ 2.90GHz
    Memory: 4.51 GB / 10.96 GB
  Binaries:
    Node: 16.13.0 - C:Program Filesnodejsnode.EXE
    Yarn: 1.22.17 - ~AppDataRoamingnpmyarn.CMD
    npm: 8.1.0 - C:Program Filesnodejsnpm.CMD

Project presset

  "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {},
        "@vue/cli-plugin-e2e-cypress": {}
      },
      "vueVersion": "3",
      "cssPreprocessor": "dart-sass"

webpack@5.64.4
vue@3.2.23
@vue/cli 5.0.0-rc.1

I’m using as webpack plugin webpack-bundle-analyzer@4.5.0

//vue.config.js
const { defineConfig } = require("@vue/cli-service");

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = defineConfig({
  transpileDependencies: true,

  chainWebpack: (config) => {
      config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin, [
        {
          analyzerMode: "server",
          openAnalyzer: true,
        },
      ]);
  },
});

What other Webpack plugins were used? Default vue/cli

[
  'vue-loader',
  'feature-flags',
  'define',
  'case-sensitive-paths',
  'friendly-errors',
  'html',
  'copy',
  'eslint',
  'fork-ts-checker',
  'BundleAnalyzerPlugin'
]

Not sure if this is a webpack-bundle-analyzer thing, or if it’s just happening because the statistics returned by Webpack is that way. Anyways, here is my output:

I’m wondering why node_modules is represented twice. I only have a single entry point in my webpack configuration. Why isn’t e.g. mobx.esm.js under node_modules to the left?

Because node_modules is represented twice, I’m guessing the size calculation is incorrect for that one?

Kind regards, Emil

Issue description

I can only see Stat after running bundle analyser.

Just adding following line makes it happen,
‘react-dates/lib’: ‘react-dates/esm’

 resolve: {
      modules: [path.resolve(__dirname), 'node_modules'],
      alias: {
        ....
        'react-dates/lib': 'react-dates/esm'
      },

If I remove this line, I am able to see all three ( Stat, Parse, Gzipped)

Logs


Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/listings.ca000d74c8c3d444f5bb.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/383.c4f37401fce0d5d17251.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/513.3ee8770c259eb4dc40d3.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/fa.6912da9faf08c2443762.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/9532.08fdeb4bb3242bf5dd03.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/476.aa246cd3d41a38e57f5a.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/6350.cc4d2249c16bac0b5c7f.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/289.8b1937750209e918ca5e.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/promotions.c1ddfa1417ee87b1e8e7.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/238.64dc60aa00b757923af9.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/5639.93c6c9816b101f4d2f57.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/397.fa964c3bde40237bcda9.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/953.d0fb03309efcbc95434b.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/fbflite.4b58541d0a3fa775ba92.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/850.5cab811dc87b85c165b9.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/546.ddc0bda42bcd377f330d.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/app.c5465342fad49a75af26.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/9072.e6be74f73f8427a09579.js": no such file
Error parsing bundle asset "/Users/kanishk.agrawal/workspace/sp-seller-dashboard/client/dist/bundles/partnerServices.9e9d449061b978da4aeb.js": no such fil

Technical info

package.json


  "scripts": {
  ....,
    "webpack2650MB": "node --max_old_space_size=2560 node_modules/.bin/webpack",
    "webpack4096MB": "node --max_old_space_size=4096 node_modules/.bin/webpack",
    "prod": "npm run webpack2650MB -- --env.prodEnvironment",
    "prod:profile": "npm run prod -- --env.profile",
    ....
  },

  "devDependencies":  {
  ....,
      "webpack": "5.43.0",
    "webpack-bundle-analyzer": "3.6.1",
    "webpack-livereload-plugin": "0.11.0",
    "webpack-merge": "4.1.0",
    "webpack-notifier": "1.13.0",
    "webpack-sources": "1.0.1",
    "webpack-stats-plugin": "0.3.1",
    "webpack-visualizer-plugin": "0.1.11"
    ....
}

Major dependency —

react: 17.0.1
react-dates: 21.6.0
"webpack-cli": "^3.3.6",

  System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 1.21 GB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  npmPackages:
    clean-webpack-plugin: 0.1.16 => 0.1.16 
    copy-webpack-plugin: ^4.5.1 => 4.6.0 
    terser-webpack-plugin: ^4.2.3 => 4.2.3 
    uglifyjs-webpack-plugin: 2.2.0 => 2.2.0 
    webpack: 5.43.0 => 5.43.0 
    webpack-bundle-analyzer: 3.6.1 => 3.6.1 
    webpack-cli: ^3.3.6 => 3.3.10 
    webpack-livereload-plugin: 0.11.0 => 0.11.0 
    webpack-merge: 4.1.0 => 4.1.0 
    webpack-notifier: 1.13.0 => 1.13.0 
    webpack-sources: 1.0.1 => 1.0.1 
    webpack-stats-plugin: 0.3.1 => 0.3.1 
    webpack-visualizer-plugin: 0.1.11 => 0.1.11

Debug info

It is a huge app. I am trying to shrink react-dates bundle size. In the process , i added ‘react-dates/lib’: ‘react-dates/esm’ following this comment ( react-dates/react-dates#874 (comment) ) ; but after this I cannot see Gzipped in chart generated by bundle analyser.

The closed issue #147 has some valuable comments about webpack-bundle-analyzer only showing stat sizes when bundle output does not go to the filesystem.

It would be valuable to document this caveat in the README.md.

This contribution opportunity has been seized by @fanich37

Please avoid creating competing pull requests

Here’s some background from the linked issue:

@jeron-diovis in #147 (comment)

Just ran into this issue using analyzer with webpack-dev-server. No angular or things like this.

The problem is that analyzer uses physical files to calc parsed/gzipped sizes – while webpack-dev-server keeps everything in memory.

Second problem is that being used as plugin, analyzer shows no errors, while CLI tools says Couldn't parse bundle asset.

As I understand, there is nothing analyzer can do with webpack-dev-server, but maybe it’s worth to explicitly mention in docs that you should have files on disc to get parsed/gzipped info?

@Macil in #147 (comment)

I was using webpack with gulp and compiler.outputFileSystem = new MemoryFS(); so that webpack wouldn’t write the bundles itself, so I ran into the same issue as @jeron-diovis. The BundleAnalyzerPlugin didn’t report any errors at all in the console, just silently produced stat-sized-only reports. I had to use webpack-bundle-analyzer on the command line on the profile json in order to see any kind of error message, which I only thought to do because of this thread.

Issue description

First of all, thank you for providing such a great product, which really helped me a lot, but I found a little problem during use, the following is a description of the problem
This plugin seems to affect

 InterpolateHtmlPlugin

Causing environment variables to be unresolved

Technical info

"speed-measure-webpack-plugin": "^1.5.0"

Debug info

npx create-react-app my-app
cd my-app
yarn add speed-measure-webpack-plugin -D

// webpack.config.js
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = function (webpackEnv) {
  const webpackConfig= {
  ...
  }
  return isEnvProduction?smp.wrap(webpackConfig) : webpackConfig;
}

Expectation：

But:

Environment variables are not parsed

vankop

Issue description

Will be cool to have hosted version like https://statoscope.tech/ to drag&drop stats from disk.

Pros:

always up-to-date webpack bundle analyzer version
more useful when download stats from browser as well (e.g. from ci artifacts)
easy to manage several opened stats

Cons:

need to host 🥶

Issue description

When I include this plugin in my webpack configuration I get the error Error: listen EADDRINUSE: address already in use 127.0.0.1:8888. The strange thing is that my browser opens the bundle analyzer page which runs just fine on the aformentioned port.

Technical info

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 8.80 GB / 15.93 GB
  Binaries:
    Node: 14.18.0 - C:Program Filesnodejsnode.EXE
    npm: 6.14.15 - C:Program Filesnodejsnpm.CMD
  npmPackages:
    webpack: ^5.58.1 => 5.58.1
    webpack-bundle-analyzer: ^4.5.0 => 4.5.0
    webpack-cli: ^4.9.0 => 4.9.0
    webpack-dev-server: ^4.3.1 => 4.3.1

Debug info

I use this as a webpack plugin with the following configuration:

new BundleAnalyzerPlugin({
         analyzerMode: 'server',
         logLevel: 'info'
})

While using the plugin I didn’t utilize any other plugin’s.

The full error:

Error: listen EADDRINUSE: address already in use 127.0.0.1:8888
    at Server.setupListenHandle [as _listen2] (net.js:1331:16)
    at listenInCluster (net.js:1379:12)
    at doListen (net.js:1516:7)
    at processTicksAndRejections (internal/process/task_queues.js:83:21) 
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1358:8)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) 
{
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '127.0.0.1',
  port: 8888
}

I tried the following solutions:

I tried to change the port to another one trough the settings but this resulted in the same.
I tried to check if any other applications were running on port :8888 but nothing is running on the port.

EDIT: https://github.com/Rickgrendel/eaddrinuse minimal reproducible example

Feature description

Currently there is no way to see «why did this module end up in my bundle». It is one of the next actionable items for a developer to solve when they are triaging their JavaScript bundles.

Today, the webpack stats object does provide this information through an API attached to the module called issuerPath. module.issuerPath will provide an array of modules that caused the current module to be imported or added to the bundle.

For example if module c was imported by b and b was imported by a: The issuerPath for module c will be [{id: a}, {id: b}] (always starting with the entry).

I believe that we should display this information when a developer hover’s over the module in question they are curious about.

I spent some time last Friday to explore the ./client app which would drive the UI in the analyzer and it looks like the data is «massaged» in a way that extra data noise is removed from the «moduletree data».

Work involved would be: add issuerPath as a property on Module on the anaylseStats fn/side of the app, and then include markup in the ModuleTree to incorporate this feature.
…

Issue description

Run npm i webpack-bundle-analyzer and go to node_modules/webpack-bundle-analyzer and you will find src and lib directories, but files used only from lib directory, we should use files in package.json to reduce package size

Technical info

It does not matter

Debug info

It does not matter

Issue description

There are 2 issues for the plugin code(not bin/analyzer). Currently, it is not a bug but nice to have

BundleAnalyzerPlugin.js should use InfrastructureLogger from webpack compiler. When I run my jest test, there are some noise message from the plugin. See the following screenshot.

I can silent the console.log for my jest test. But I have to write some to find the plugin in my shared webpack.config.js and then replace the existing plugin with another one to silent log messages.
When I launch the webpack-dev-server, I expect my dist should be empty. Currently it always has report.html. Other assets are in memfs. I have a jest test to check the folder is empty. Now I have to write more code to handle it differently

zdm

Issue description

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

Error parsing bundle asset "d:projectsdevelrankrocketappwwwjsapp.a49e5464.js": no such file
Error parsing bundle asset "d:projectsdevelrankrocketappwwwjspdfmake.d2d0b128.js": no such file
Error parsing bundle asset "d:projectsdevelrankrocketappwwwjsvendors.aa8b04ed.js": no such file
Error parsing bundle asset "d:projectsdevelrankrocketappwwwjsprivate.18a4a042.js": no such file
Error parsing bundle asset "d:projectsdevelrankrocketappwwwjspublic.6ce47ae2.js": no such file
Error parsing bundle asset "d:projectsdevelrankrocketappwwwjsnode_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:develnodenode.exe
    npm: 7.20.2 - ~.npmnpm.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

jimblue

Hi,

Actually webpack-bundle-analyzer doesn’t offer an option to choose which browser open.

The option can only be set to default or null.

As many people use a different browser for development than for browsing it could be nice to have such choice.

Cheers

Issue description

Get crash if I try to pass custom arguments to process.argv from scripts in package.json

Technical info

If I add to scripts in package.json some additional props, I get error:

> npm run build:analize

> project@1.0.0 build:analize
> webpack --mode production --progress --no-devtool -- --analizefff

99% done plugins webpack-bundle-analyzerWebpack Bundle Analyzer saved report to E:project_root
65 assets

ERROR in main
Module not found: Error: Can't resolve '--analize' in 'E:project_root'

webpack 5.41.0 compiled with 1 error in 4825 ms

package.json

{
  "scripts": {
    "build:analize": "webpack --mode production --progress --no-devtool -- --analize",
  },
}

Debug info

How do you use this module? As CLI utility or as plugin?
as plugin

If plugin, what options were provided? (e.g. new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true }))

  if (process.argv.includes("--analize")) {
    plugins.push(new BundleAnalyzerPlugin());
  }

stats.json will be created in Webpack bundle output directory.
no stats.json, it crashes.

oprav

Issue description

While migrating from webpack@3 + webpack-bundle-analyzer@3 to webpack@5.51.1 + webpack-bundle-analyzer@4.4.2 I noticed that HTML report doesn’t seem to display parsed sizes of bundled modules anymore. It also looks like bundled node_modules‘s stats are not displayed when switching into parsed treemap view.

Notes:
This might be related to #327 although I’m not totally sure since #327 mentions issues for edge cases only.

I have created a minimal repro setup demonstrating allegedly missing stats: https://github.com/oprav/wba-webpack5-repro

Not sure if this is expected — I noticed that this condition doesn’t seem to be met when attempting to generate report for my bundle:

// It should not contain neither arguments

i.e. there are no modules parsed into walk.locations:

if (walkState.locations) {

Technical info

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.65 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.18.4/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
  npmPackages:
    webpack: ^5.52.1 => 5.52.1 
    webpack-bundle-analyzer: ^4.4.2 => 4.4.2 
    webpack-cli: ^4.8.0 => 4.8.0

Debug info

How do you use this module? As CLI utility or as plugin?

Plugin

If CLI, what command was used? (e.g. webpack-bundle-analyzer -O path/to/stats.json)

If plugin, what options were provided? (e.g. new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true }))

{
    openAnalyzer: false,
    reportFilename: `report.html`,
    analyzerMode: 'static',
 }

What other Webpack plugins were used?

None (for repro code)

It would be nice to also attach webpack stats file.
It can be generated using these options:

new BundleAnalyzerPlugin({
  analyzerMode: 'disabled',
  generateStatsFile: true,
  // Excludes module sources from stats file so there won't be any sensitive data
  statsOptions: { source: false }
})

stats.json will be created in Webpack bundle output directory.

File link: https://github.com/oprav/wba-webpack5-repro/blob/master/output/stats.json

Right now, when my build fails the bundle analyzer runs nonetheless, spitting out hundreds of lines like «Error parsing bundle asset …»

It would be much nicer if I could configure this plugin to run only after a successful build

karlvr

Issue description

I’d like to be able to specifically identify initial chunks.

Please let me know if I’ve missed anything obvious, or if my thinking is flawed, or any improvements or suggestions. If it sounds like a good idea I’d be happy to look into contributing this to the project.

Herz3h

Issue description

I’m trying to search by chunk name from the list of generated chunks by webpack (which have names similar to 1.js, 2.js, these correspond to chunks issued due to code splitting) but upon searching it doesn’t find them.

Technical info

npx : 1 installé(s) en 1.765s

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 113.52 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.24.0 - ~/.nvm/versions/node/v10.24.0/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v10.24.0/bin/npm
  npmPackages:
    assets-webpack-plugin: ^5.1.2 => 5.1.2
    brotli-webpack-plugin: ^1.1.0 => 1.1.0
    compression-webpack-plugin: ^5.0.2 => 5.0.2
    copy-webpack-plugin: ^6.4.1 => 6.4.1
    csso-webpack-plugin: ^2.0.0-beta.3 => 2.0.0-beta.3
    hard-source-webpack-plugin-fixed-hashbug: ^0.13.2 => 0.13.2
    optimize-css-assets-webpack-plugin: ^5.0.6 => 5.0.6
    speed-measure-webpack-plugin: ^1.5.0 => 1.5.0
    terser-webpack-plugin: ^3.1.0 => 3.1.0
    webpack: ^4.46.0 => 4.46.0
    webpack-bundle-analyzer: ^4.4.2 => 4.4.2
    webpack-cli: ^3.3.12 => 3.3.12
    webpack-dashboard: ^3.3.3 => 3.3.3
    webpack-dev-server: ^3.11.2 => 3.11.2
    webpack-merge: ^4.2.2 => 4.2.2
    webpack-notifier: ^1.13.0 => 1.13.0
    webpack-watched-glob-entries-plugin: ^2.1.9 => 2.1.9
    wildcards-entry-webpack-plugin: ^2.1.0 => 2.1.0

Debug info

new BundleAnalyzerPlugin({ openAnalyzer: false })

Источник

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Источник

Error parsing bundle asset «*» no such file when mixing relative paths

Technical info

Debug info

Issue description

Technical info

Proposed solution

Issue description

Technical info

Project presset

Issue description

Technical info

Debug info

This contribution opportunity has been seized by @fanich37

Issue description

Technical info

Debug info

Issue description

Issue description

Technical info

Debug info

Feature description

Issue description

Technical info

Debug info

Issue description

Issue description

Technical info

Debug info

Issue description

Technical info

Debug info

Issue description

Technical info

Debug info

Issue description

Issue description

Technical info

Debug info

Recommend Projects

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&amp;v=4" alt="Django photo" /> Django

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent

Typescript

Django

Laravel

Facebook

Microsoft

Alibaba

D3

Tencent