How to use this plugin in a Webpack v5 ESM module

[rickstaa]

Issue description

Sorry in advance for posting this as an issue but this repository does not seem to have a discussions tab. I'm trying to add this plugin to a Webpack project that bundles a ESM module. Since this plugin is still a commonjs plugin I tried the following syntax:

import wba from "webpack-bundle-analyser";

export default {
  mode: mode,
  plugins: [new wba.BundleAnalyzerPlugin()],
}

This however gives me the following error when trying to run webpack:

[webpack-cli] Failed to load '/home/ricks/Development/personal/webpack5-esm-library-example/webpack.config.js' config
[webpack-cli] TypeError: wba.BundleAnalyzerPlugin is not a function
    at file:///home/ricks/Development/personal/webpack5-esm-library-example/webpack.config.js:12:17
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async WebpackCLI.tryRequireThenImport (/home/ricks/Development/personal/webpack5-esm-library-example/node_modules/.pnpm/webpack-cli@4.9.1_webpack@5.65.0/node_modules/webpack-cli/lib/webpack-cli.js:254:18)
    at async loadConfigByPath (/home/ricks/Development/personal/webpack5-esm-library-example/node_modules/.pnpm/webpack-cli@4.9.1_webpack@5.65.0/node_modules/webpack-cli/lib/webpack-cli.js:1710:19)
    at async WebpackCLI.loadConfig (/home/ricks/Development/personal/webpack5-esm-library-example/node_modules/.pnpm/webpack-cli@4.9.1_webpack@5.65.0/node_modules/webpack-cli/lib/webpack-cli.js:1830:30)
    at async WebpackCLI.createCompiler (/home/ricks/Development/personal/webpack5-esm-library-example/node_modules/.pnpm/webpack-cli@4.9.1_webpack@5.65.0/node_modules/webpack-cli/lib/webpack-cli.js:2185:18)
    at async WebpackCLI.runWebpack (/home/ricks/Development/personal/webpack5-esm-library-example/node_modules/.pnpm/webpack-cli@4.9.1_webpack@5.65.0/node_modules/webpack-cli/lib/webpack-cli.js:2321:16)
 ELIFECYCLE  Command failed with exit code 2.

My question, therefore, is whether the webpack-bundle-analyser plugin supports this use-case?

How to reproduce

1. Clone this example repository.

2. Install the node dependencies.

3. Run the npm build command.

Technical info

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 43.36 GB / 62.66 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  npmPackages:
    webpack: ^5.51.1 => 5.65.0
    webpack-bundle-analyser: ^1.4.0 => 1.4.0
    webpack-cli: ^4.8.0 => 4.9.1

Debug info

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

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

What other Webpack plugins were used?: None

Webpack stats file: Could not be generated.

[rickstaa]

I just found the right syntax:

import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";

export default merge(common, {
  mode: "production",
  devtool: "source-map",
  plugins: [new BundleAnalyzerPlugin()],
});

[nyngwang]

@rickstaa So it doesn't support type? (I cannot do auto/tab-completion in my IDE.)

[rickstaa]

@nyngwang I am not really sure. I vaguely remember it working in vscode. Maybe you can open a new issue to alert the developers?