react-feather: Tree-shaking seems to be broken

Running webpack bundle analyzer, I am seeing every icon being included in my minified bundles: screen shot 2017-11-14 at 8 11 56 am

Not sure if I am doing something wrong of if there is a problem in the package.

babelrc settings:

{
    "presets": [
        ["env", {
            "loose": true,
            "modules": false
        }], "react"
    ],
    plugins: [
        'syntax-dynamic-import',
        'transform-object-rest-spread',
        'transform-class-properties'
    ]
}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 15
Comments: 24 (3 by maintainers)

Commits related to this issue

feat: add tree-shaking supportive fix #6 — committed to lili21/react-feather by lili21 6 years ago
Switch from react-feather to react-icons. Bundle size drops ~250kb, but now our icons are the wrong size... Hopefully this gets fixed so we can revert: https://github.com/feathericons/react-feather/... — committed to mytakedotorg/mtdo by nedtwigg 4 years ago

Most upvoted comments

@nedtwigg You need to change the following lines in tsconfig.json:

-"module": "commonjs",
+"module": "esnext",
+"moduleResolution": "node",

Check out the size before 409054 B and after 27987 B.

Basically, with commonjs you are telling typescript to transpile ES Modules into CommonJS require/exports syntax. CommonJS is notoriously hard to tree shake due to its dynamic nature, and most bundlers doesn’t even try. If you set esnext however, this will leave import/export syntax intact so that webpack can take care of module resolution and tree shaking.

alex996 on Sep 12, 2020

Same problem, but i use TypeScript without Babel.

Fast fix for reduce bundle size - use full path, example: import Download from 'react-feather/dist/icons/download';

SuperOleg39 on Nov 22, 2017

Version 2.0.1 is out, with all the latest icons and support for tree-shaking.

carmelopullara on Jul 4, 2019

@carmelopullara I’m using 2.0.8 and I still seem to have the issue.

Capture d’écran 2020-08-15 à 02 09 27

I’m using ES imports (reexports, not full paths) within a CRA app.

sarahdayan on Aug 15, 2020

Yo guys,

Help is here:

Add babel-plugin-import
Add next config to babel plugins: ["import", { "libraryName": "react-feather", "libraryDirectory": "dist/icons", "camel2DashComponentName": false }],

Profit!

Allend13 on Aug 19, 2018

@carmelopullara I don’t see the tree-shaking working properly with es imports:

import { Download, Trash2, Copy } from 'react-feather';

All library ends up in the bundle. What’s the intended way to use the lib?

damianobarbati on Aug 17, 2020

@cichelero Would it help if the project added a "sideEffects": false to the package.json file, according to the link you posted?

RinkAttendant6 on Aug 30, 2018