Tree-shaking seems to be broken

Running webpack bundle analyzer, I am seeing every icon being included in my minified bundles:

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'
    ]
}

[alex996]

@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.

[SuperOleg39]

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';