Optimizing @mui/joy package barrel imports does not work with optimizePackageImports and turbopack

[PMudra]

Link to the code that reproduces this issue

https://github.com/PMudra/reproduction-app-optimize-package-imports-joy-ui

To Reproduce

1. Start the aplication in dev mode and turbopack. npm run dev -- --turbopack
2. Open the page with your browser.
3. Inspect the loaded js modules using the "Coverage" tab of the dev tools (I am using chrome dev tools for this).

Current vs. Expected behavior

Example

// page.tsx
import { Button } from "@mui/joy";

export default function Home() {
  return <Button>My button</Button>;
}

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactStrictMode: true,

  experimental: {
    optimizePackageImports: ["@mui/joy"],
  },
};

export default nextConfig;

Current result

All modules of mui/joy seem to be loaded by the browser. Most of its functions / components are unused.

Especially the first bundle contains many unused functions of mui/joy.

Expected behavior

Only the modules that are really needed should be loaded, even though I am importing from the barrel file @mui/joy.
The result should be similar to importing directly from @mui/joy/Button (non-barrel import).

In this case, there is no obvious trace of the mui/joy package because it's now way smaller and part of one of the node_modules chunks.

So when searching for /joy/ in the Coverage tab, I'd expect to only find some results for the Button component and its direct dependencies.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #14-Ubuntu SMP PREEMPT_DYNAMIC Sat Nov 30 23:51:51 UTC 2024
  Available memory (MB): 63439
  Available CPU cores: 16
Binaries:
  Node: 22.13.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.0.0
Relevant Packages:
  next: 15.2.0-canary.18 // Latest available version is detected (15.2.0-canary.18).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Performance, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

• When using webpack, the optimizePackageImports option seems to be working as expected.
• The issue seems to be somehow related to Server Components. The problem occurs when I import directly from @mui/joy in page.tsx, which is a Server Component. When importing in a Client Component ("use client") only the necessary modules are loaded. But in that case, I don't even have to specify optimizePackageImports as this seems to work out-of-the-box.
• mui/joy is very similar to @mui/material which is added to optimizePackageImports by default. I am not sure why joy won't work the same way.
• I have also tried out using the deprecated modularizeImports option with some success. But this is not documented any more. And a configuration with a mix of named and default imports seems to be complicated.

Possible workarounds seem to be:

1. Don't import from the barrel file.
2. Use webpack instead of turborepo.
3. Use client components only.

All of the above are not great. Are there other ones?

Related issues:

• [NEXT-1143] Dev mode slow compilation #48748
• Next.js development high memory usage #54708
• optimizePackageImports is not working with react-icons in dev mode #70666

Thanks for looking into this and let me know if you need more information.