sjdemartini
commented
1 year ago Thank you for reporting and detailing this @cwierzbicki00! This is something that had been on my radar vaguely but I hadn't pursued making changes yet. I suppose per https://mui.com/material-ui/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking, we should be updating not just the @mui/icons-material paths but also the @mui/material component paths as well. Those can definitely be done separately though. I'll take a look at your PR shortly, thanks again!
Describe the bug
On some platforms, such as Nextjs 13, an issue emerges due to the large bundle size of mui-tiptap / it's import method for some of "@mui/icons-material". For most of the codebase, direct path imports are used. There are some areas where the tree shaking imports are used, which bloat the package and are strangely linked to issues on Nextjs 13.
To Reproduce
Not possible to reproduce without a full Nextjs 13 deployment on Vercel. Not necessarily relevant, either.
Steps to reproduce the behavior:
Expected behavior
The inclusion of mui-tiptap should safely import the icons from @mui/icons-material using the direct path. Then, the application runs smoothly.
Screenshots
Simply need to change from
to this
System (please complete the following information):
Additional context
Regardless, this will reduce the bundle size and is considered best practice. (See mui docs https://mui.com/material-ui/icons/#usage )
The imports should be changed to direct path imports unless the techniques specified here are used https://mui.com/material-ui/guides/minimizing-bundle-size/#option-two-use-a-babel-plugin
It is my first time contributing on OSS, so please forgive any mishaps. I am a really big fan of this project and am impressed with the design & codebase. I will attempt to open a PR for this issue shortly.