Within the Mui guidelines, they propose utilizing:
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
for style imports as opposed to:
import { Button, TextField } from '@mui/material';
The rationale behind this recommendation seems to be that the @mui/material style import goes through a barrel file - causing issues with bundlers like Webpack such as:
- Inaccurate treeshaking for production bundles
- No treeshaking for development builds, resulting in slower build times.
Webpack relies on an exports property within the package.json file (documentation here) to define submodules accessed via @mui/material/Button style imports.
However, it appears that Mui does not actually utilize this in their package.json file
So the question remains: how do these imports function correctly without these specified exports?