[RSC] The entire `@mui/joy/node` bundle is included in the client bundle when Joy UI component is being imported into a RSC

[mwskwong]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://github.com/mwskwong/mui-joy-nested-grid-in-server-component

Steps:

1. Create a Next.js app router app
2. Import any MUI Joy components in page.tsx, which is my default RSC.
3. Build the project and observe the tree map of the client bundle. The entire @mui/joy/node will be included.

Current behavior 😯

The node bundle of @mui/joy is being bundled in the client bundle.

Expected behavior 🤔

The client-side bundle + tree-shaking should be used instead.

Context 🔦

Doesn't seem to affect functionality though. Just that the client bundle becomes massive.

Not sure if only Joy is affected. Or all MUI packages.

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.22621 Binaries: Node: 18.16.1 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.22621.1928.0), Chromium (114.0.1823.58) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.7 @mui/core-downloads-tracker: 5.14.0 @mui/joy: ^5.0.0-alpha.87 => 5.0.0-alpha.87 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/system: 5.14.0 @mui/types: 7.2.4 @mui/utils: 5.13.7 @types/react: 18.2.14 => 18.2.14 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.1.6 => 5.1.6 ```

[mj12albert]

@mwskwong Change these to a path import:

-import { Box, Grid, Sheet } from "@mui/joy";
+import Box from "@mui/joy/Box";
+import Grid from "@mui/joy/Grid";
+import Sheet from "@mui/joy/Sheet";

Before:

After:

(from .next/analyze/client.html)

[mwskwong]

I think the biggest thing is the node bundle is not supposed to be in the client bundle in the first place.

[siriwatknp]

@mwskwong Can you confirm that this is because of our side? I doubt that it is from the framework side.

[mwskwong]

It's hard to say TBH, since Next is the only one implementing RSC right now.

[mwskwong]

Adding some more info, currently the entry file of @mui/joyand @mui/base is ./node/index. If I change it to ./index, then the correct bundle will be included in both Next.js's client and node bundle.

[DesignsToGrow]

I have a similiar issue but with with @mui/material.

Whenever i import just one material ui component from @mui/material it includes this big chunk called @mui/base

I tried importing my components as suggested by the documentation but no luck:

import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Link from '@mui/material/Link';

Is the "base" part something that is crucial to even use a single mui material component or did i make a mistake with my next.js setup?

[mwskwong]

Yeah, not even modularized import helps here. I have yet to find a way to work around the mui base issue.

And no, the entire base bundle is not needed in most cases.

[mwskwong]

FYR, this issue can also be reproduced using any Next.js app router example from this repo.

e.g. https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts

[mwskwong]

Not entirely sure, but it may be related to this Next.js issue https://github.com/vercel/next.js/issues/52679

[MostafaKMilly]

Same issue in @mui/material

[mwskwong]

Next.js has introduced an experimental config optimizePackageImports that aims to solve the tree-shaking issue. By default, @mui/material and @mui/icons-material are included. Yet, the config is currently quite buggy and may cause the project build to fail.

Yet, this doesn't solve the case of why the node bundle of MUI packages is getting included in the client bundle of Next.js, instead of the ESM bundle.

But at least for now, it seems that Next.js is partially respo0nsive for this and is working on it for that part