webpack bundling and "module has no exports"

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
orestisioakeimidiscommented, Sep 29, 2022

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

2reactions
skratchdotcommented, Sep 29, 2022

Here’s the issue:

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

image

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can not access defined exports from the webpack bundle?
If I have a single file in the entry section for core object, exports work, in that the LIB variable has property for...
Read more >
Compiled bundle ignores "module.exports" values ... - GitHub
I use Webpack to compile React components and make two bundles - one for client, one for server. The server bundle has module.exports...
Read more >
Package exports - webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
How to transpile ES modules with webpack and Node.js
In the JavaScript ecosystem, webpack stands out as a major tool for bundling our code. But before we dive into how webpack does...
Read more >
Webpack module bundler - DEV Community ‍ ‍
Plugins. Webpack contains default behaviors to bundle most types of resources. When loaders are not enough, we can use plugins to modify or...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found