Tree-shaking of Material-UI components not happening in transpiled version of component, after exporting to bit.

[devGitAbhishek]

Named imports lead to import of full lib which increases the bundle size of the component.

I have made a bit component which MUI lib version 4.11.3. I have imported Typography, Textfield In following way: import {TextField,Typography} from '@material-ui/core'

After successful import to bit, when I install the component in our project, the transpiled version of the component imports full Mui Lib in this way : var _core = require("@material-ui/core");

Tree-shaking of Material-UI works out of the box in modern frameworks. Hence, we should have seen this working in the bit component too.

Steps to Reproduce

1. Make a bit component with MUI lib 4.11.3, export it.
2. Install component in your project.
3. Check under dist transpiled version of your component, you would full lib import instead of specific imports.

Expected Behavior

It should have imported specific component which we require instead of importing full lib.

Specifications

• Bit version::14.8.8
• Workspace type: (harmony/legacy): legacy
• Node version: 16.13.1
• npm / yarn version: yarn 1.22

for harmony workspace

• relevant env
• relevant aspects

for leagacy

• Bit compiler (include version):bit.envs/compilers/[email protected]
• Bit tester (include version): N/A

[alvexld]

Looks like bit.dev doesn't handle tree-shaking (at least for all MUI librairies).

To deal with that, I used path import according to these guidelines (using option 1)

In your case it would be

import TextField from '@material-ui/core/TextField'
import Typography from '@material-ui/core/Typography'

Seems to be the easiest way for a small project. It would be great if bit could handle it automatically

[itaymendel]

you need to update yoru env to the ESM one - please use https://bit.cloud/react/react-env this will help with tree-shaking for your code.