I import package A in a Next JS application.

Package A imports an icon from @mui/icons-material like this import Icon from "@mui/icons-material/Icon".

This causes an error, as Icon looks like this { default: ..., __esModule: true }.

What could be the problem here?

I tried:

1. Adding a webpack alias from @mui/icons-material to @mui/icons-material/esm
2. Adding experimental package import optimization
3. I changed that import to import { Icon } from "@mui/icons-material" but it causes my app bundle to include every icon from that package. What’s interesting, @mui/icons-material/esm is included, so Next correctly reads that I’m in an ESM context.
4. I changed that import to import Icon from "@mui/icons-material/esm/Icon" and it worked as well and the bundle looked good. I don’t have control over package A, unfortunately.
5. If I import that same icon directly in my application it gets tree shaken correctly. If I import it as a default export it works as well. There’s something very specific about using it in an imported package that’s already a JS file, not TS.