plugin-webpack-filter; Documentation; Importing into ESM

[SStranks]

The official documentation guide: Output webpack stats with webpack-stats-plugin

In the documentation the example given for importing the package is in CommonJs;
const filterWebpackStats = require('@bundle-stats/plugin-webpack-filter').default;

Importing the module using ESM syntax would then use the following;
import filterWebpackStats from '@bundle-stats/plugin-webpack-filter'

However, this then throws a run-time error from the following line in the documentation (error: 'not a function');
const filteredSource = filterWebpackStats(webpackStats);

The run-time error can be solved by using filterWebpackStats.default(webpackStats);;
However, this throws up a type-error:
Property 'default' does not exist on type '(source: StatsCompilation, options?: BundleStatsOptions | undefined) => WebpackStatsFiltered'

I was able to solve this by adding a declaration to my .d.ts file;

Basically, I'm looking to understand what is going on here and whether this is an error in the type definitions for the library, or whether it is intentional - from my research it seems like there is a history involving CommonJS, ESM, and how libraries have been constructed along the timeline of developments.

[vio]

@SStranks thank you for opening an issue!

Can you please share your version of Node and whether the module you are trying to import is ESM or Typescript?

I was able to replicate your error by using an import inside an esm config file (.mjs). I believe that's a problem with the way we publish the ESM modules, I will investigate and get back to you with an update.

[SStranks]

I'm using Node v.20.9.0. I was importing the package into my webpack config file (.js) - my package.json has "type" set to "module".

It's a TypeScript (v5.3.3) project; the webpack configs are using // @ts-check to allow TypeScript to check the configuration files.

I'm interested in understanding all this, so any insights or information on the whole thing would be appreciated :)

[vio]

@SStranks i released a fix for it in v4.14.2-beta.2.

The current stable ships commonjs and esm in ".js" files and only sets "module" property in package.json. Bundlers are able to load the correct format, but node is not able to load the esm format:

1. if the package.json exports field is not set
2. when type is not set to "module" and if the file extension is ".js". when type is set to "module", the esm is loaded correctly, but commonjs format is not loaded correctly

More resources:

• https://2ality.com/2019/10/hybrid-npm-packages.html
• https://webreflection.medium.com/a-nodejs-dual-module-deep-dive-8f94ff56210e

---

We have an update that publishes correct mjs/cjs files, but because the change is breaking, it will wait until the next major. Until then, the workaround adds an exports field and adds type-module only for the esm folder.