Tree shaking and ESM Support not useful

I’ve been trying to get tree shaking to work with heroicons in our app using webpack.

When importing I would expect unused icons to be tree shaken, but in order to do so the esm version has to be explicitly imported.

import { MenuIcon } from '@heroicons/react/solid'; // no tree shaking
import { MenuIcon } from '@heroicons/react/solid/esm'; // tree shaking works

This is not expected as other libraries manage to make this work. This is a real issue in that the runtime/bundler can’t decide for itself which loader to use. In our app we have a browser bundle, a SSR bundle and we run our code via jest, all these environments need to dynamically choose which loader to use and they can’t do that if we have to hard code one in the code.

After some research I believe the package.json needs a main and module key for the bundler to be able to select which build to use https://github.com/rollup/rollup/wiki/pkg.module

I don’t think it’s that easy though as you can’t specify multiple entrypoints and heroicons has 2, solid/esm/index.js and outline/esm/index.js

In the meantime we have to import specific icons to avoid loading the entire library. This isn’t ideal as it’s hard to enforce and IDEs will often “help” by collapsing them.

import MenuIcon from '@heroicons/react/solid/MenuIcon';

[adamwathan]

Unfortunately just not a priority right now, happy to accept a PR otherwise will get to it when we get to it. Sorry 😞

[HarshaVardhanNakkina]

@adamwathan is this related to package.json file in esm folders? the contents of the package.json file in esm folder after running npm run build-react are like this

{
  "type": "module",
  "sideEffects": false
}

but for tree-shaking to work, I guess, there should be an entry called "module": "<path-to-entry-file>" if this is the problem, I would like to contribute 😊.