Repository: next.js
Issue: Optimizing @mui/joy package barrel imports does not work with optimizePackageImports and turbopack
Labels: Performance,Turbopack,linear: turbopack

### 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

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

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

```ts
// 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.

![Image](https://github.com/user-attachments/assets/6c249922-020c-467c-91f9-01708114b2b1)

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

![Image](https://github.com/user-attachments/assets/8e2da012-0aad-42b6-bb0d-3a89e4c8532e)

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

```bash
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:

- https://github.com/vercel/next.js/issues/48748
- https://github.com/vercel/next.js/issues/54708
- https://github.com/vercel/next.js/issues/70666

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