[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

• I have searched the existing issues

Latest version

• 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.