webpack bundling and "module has no exports"

Hey! First off thanks for making this great library!

I just tried upgrading filesize from v9 to v10.

After changing my imports from:

import filesize from 'filesize'

to:

import { filesize } from 'filesize'

I thought things would work, but when I ran my app, I saw the following webpack error when visiting my site:

export 'filesize' (imported as 'filesize') was not found in 'filesize' (module has no exports)

I was able to “fix” the issue by adding the following resolve alias to my webpack config:

    resolve: {
      alias: {
        filesize: require.resolve('filesize'),
      },
    },

My project is using typescript, and I think a fairly standard webpack setup.

I did a little searching, and I’ve seen a few people mention that changing the “browser” field from a string to a map might force webpack to pick the “module” over the “browser” field?

I think my build was using the browser field by default and that doesn’t have exports?

https://github.com/webpack/webpack/issues/4674#issuecomment-355853969

https://github.com/defunctzombie/package-browser-field-spec

[orestisioakeimidis]

I am having the same issue. Thanks for the workaround @skratchdot!

[skratchdot]

Here’s the issue:

https://codesandbox.io/s/reverent-resonance-8sus4p?file=/src/index.ts

All I did was clone the typescript-webpack template, the I added filesize as a dependency, and changed index.ts from:

console.log('hello world!@');

to:

import { filesize } from "filesize";

document.body.innerHTML = "hello world 1";

document.body.innerHTML = "hello world 2" + filesize(200);

If the error wasn’t happening, I would expect to see: hello world 2 200 B as the html content.

NOTE: that project’s webpack config is different than mine, but the common thing between the two is I use typescript, webpack 5, and see the same error when importing filesize. No need to rush a fix on this, just wanted to let people know of a temporary workaround!!! Thanks again!