Cannot import @mui/material from an ESM dependency

[bartlangelaan]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/nextjs-issue-cannot-import-mui-material-from-mjs-dependency-88x7qr

To Reproduce

1. Run pnpm install
2. Run pnpm run build in the packages/example-alert folder
3. Start the application (root folder) in development (pnpm run dev)

Current vs. Expected behavior

The following error appears: Error: Element type is invalid. Received a promise that resolves to: [object Module]. Lazy element type must resolve to a class or function.

This happens in both the app router and the pages router, if a dependency renders something from @mui/material.

It does work with Turbopack, but not with Webpack.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4242
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.3.1-canary.7 // Latest available version is detected (15.3.1-canary.7).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Module Resolution, Webpack

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

next dev (local), next build (local)

Additional context

The package is compiled to this:

// src/index.tsx
import { Alert } from "@mui/material";
import { jsx } from "react/jsx-runtime";
function ExampleAlert() {
  return /* @__PURE__ */ jsx(Alert, { children: "This is a simple alert!" });
}
export {
  ExampleAlert
};

The Alert import is not resolved to a component somehow while using webpack.

[Janpot]

Hi, I'm from the MUI team and just stumbled onto this issue. In @mui/material@7 we've fixed our package layout and with this version it should be possible to correctly import from a ESM only module. If you should encounter the problem with v7 as well, we encourage you to open a ticket at https://github.com/mui/material-ui/issues