Library doesn't support tree shaking, as well as breaks material-ui's own tree shaking

[Cody Schaaf]

As you can see here:

https://github.com/CodySchaaf/material-ui-formik

When you include any of this libraries components it ends up pulling in all of material-ui's components that are imported into formik-material-ui because of how the library builds all of the exports into a single dist/index.js file.

Just material-ui:

After adding material-ui-formik

[Web App Coding]

Same issue here

[Ciaran Liedeman]

does the issue still happen if you import the components directly without using the index?
You will have the same isue if you import directly from the material ui top level

[Cody Schaaf]

@cliedeman No you won't. In my first screen shot I am importing the components from the top level (as you can see in the linked repo CodySchaaf/material-ui-formik@b0a81b2), and only the ones I use are in the bundle. Most modern libraries are bundled in a way that that is supported without issue. See https://material-ui.com/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking

If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and still get an optimised bundle size automatically:

import { Button, TextField } from '@material-ui/core';

Idk if it as simple as adding "sideEffects": false to your package.json like material-ui has, or if you need additional rollup config.

[Cody Schaaf]

It also doesn't look like you can actually hit anything but the index for this project because the package doesn't have anything else (the other files are just type files without any code).

Not sure if you would have better luck using the es6 one, but like with other packages it should pick that one automatically if it is more appropriate.

[Cody Schaaf]

ah just kidding webpack already intuitively picks the es6 module one https://github.com/webpack/webpack/blob/52184b897f40c75560b3630e43ca642fcac7e2cf/lib/WebpackOptionsDefaulter.js#L337

[Ciaran Liedeman]

@CodySchaaf try

import { Checkbox } from 'formik-material-ui/dist/Checkbox';

Edit: this does not work

[Ciaran Liedeman]

if you confirm that works then you can use an eslint rule like

"no-restricted-imports": ["error", "formik-material-ui"],

to ban the top level import.

And we can add a FAQ entry about this

[Ciaran Liedeman]

@CodySchaaf try [e-mail].1