webpack bundling and "module has no exports"

[skratchdot]

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

[avoidwork]

Sorry about that, the named export was wrong on the UMD file. This is fixed in 10.0.2.

[skratchdot]

Thanks for the super fast turnaround!

I upgraded to 10.0.2, and removed the alias, and I still see:

Adding the alias back in "fixed" things again.

I'll try to come up w/ a codesandbox to show the issue.

[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!

[orestisioakeimidis]

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

[akhmyrov]

@avoidwork Hi! I created a pull request which should help with this problem

[paulschreiber]

@avoidwork I am getting the problem on compile with 10.0.2. We are using react-scripts build.

Creating an optimized production build...
Failed to compile.

Attempted import error: 'fileSize' is not exported from 'filesize' (imported as 'fileSize').

[skratchdot]

@avoidwork I am getting the problem on compile with 10.0.2. We are using react-scripts build.

Creating an optimized production build...
Failed to compile.

Attempted import error: 'fileSize' is not exported from 'filesize' (imported as 'fileSize').

@paulschreiber - This looks like a case-sensitivity issue.

Change:

import { fileSize } from 'filesize'

to:

import { filesize } from 'filesize'

after you do that, you may or may not run into the error from this issue.

[paulschreiber]

ah, that was a typo. Everything is lowercase and we still have e error. Source: https://github.com/techmatters/terraso-web-client/compare/main...fix/dependenecies-filesize

$ npm run build

> terraso-web-client-poc@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Attempted import error: 'filesize' is not exported from 'filesize' (imported as 'filesize').```

[avoidwork]

can anyone explain the issue? the module changed from a default export to a named export; is the umd the problem for web pack? would an iife solve the issue?

I'm happy to do something to solve the issue, but is returning the default and removing the named the best solution? I can undo that change.

[avoidwork]

Re-opening because I don't know if it's solved by returning the default export; 10.0.3 has the default export.

[avoidwork]

@skratchdot thanks for that demo above, i'll see about making that a test case.

[avoidwork]

webpack appears to be incompatible with the amd/umd/iife output from rollup, so as a quick fix i've removed the 'browser' key from package.json which lets webpack default to a better file to work with, and added test-webpack script to do a build with the test repo to see if it errors.

this is 10.0.4.

[skratchdot]

awesome! thank you @avoidwork . Removing "browser" was the only solution I knew of, but I figured you had some users that made use of it. It's fairly complicated to support all the different options I feel like. I tried looking for "standard" rollup configs, but didn't find much.

i think due to how complicated it is to support everyone's setup, some people have just started supporting ESM only, and link to something like: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

you'd probably still get support requests if you did that though 🤣- so i like your solution of supporting commonjs and esm :) and umd people can still find those files in your dist folder.

[skratchdot]

I also wanted to give you confirmation that v10.0.5 is working for me (without any workarounds). Thank you for all your work!!!