Next JS 13.4 appDir - MUI Compiled /page in 8.2s (2728 modules)

[imceZZ]

I am using "@mui/material": "5.14.13" and "next": "13.5.4" but during development and also build is slow I saw another topic that was discussing this issue but I couldn't find any answer that will work I also tried flatten import example from this:

import { Box } from "@mui/material";

to this:

import Box from "@mui/material/Box";

this reduces first load js but again its not how it should be, again it loads 2728 modules.

this is screenshot when I run yarn dev:

this is documentation that I followed to implement MUI in next js: MUI DOC

please don't close this until it has solution this is headache.

[imceZZ]

@siriwatknp any update for this issue.

[mnajdova]

Are you using the modularizeImports option? We need a reproduction repository so that we can investigate what is the problem. Without it we cannot act on anything.

[imceZZ]

@mnajdova you can replicate this problem by just creating pure Next Js project and try to implement MUI app dir structure following this

Also the same problem encountering many users:

Vercel discussion
another topic for same problem

I have tried modularizeImports but again its not how it should be.

modularizeImports: {
        "@mui/material/?(((\\w*)?/?)*)": {
            transform: "@mui/material/{{ matches.[1] }}/{{member}}",
            skipDefaultConversion: true,
        },
    },

Also Next JS has introduced optimizePackageImports but again it has problems LINK

This is a screenshot from Webpack Bundle Analyzer:

As I know MUI uses tree-shaking (Tree-shaking Material UI works out of the box in modern frameworks. )

Is this problem from barrel index file's or not. What we can do to resolve this issue I think this issue should have priority on MUI as Next JS is very popular framework.

[oliviertassinari]

This looks like a duplicate of #35840 to me.

I don't see much to do about it, barrel indexes are slow: https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-7/. And maybe Next.js made it faster in https://vercel.com/blog/how-we-optimized-package-imports-in-next-js:

but Vite, etc. didn't.