Error and reload during HMR with MUI

[Janpot]

Link to the code that reproduces this issue

https://github.com/Janpot/next-mui-reproduction

To Reproduce

1. Clone https://github.com/Janpot/next-mui-reproduction (can't reproduce this in codesandbox/stackblitz)

2. Run pnpm install

3. Run pnpm dev

4. Open http://localhost:3000/

5. Open browser devtools, make sure it preserves logs on reload (e.g. on Chrome console settings: "preserve log")

6. Open src/app/page.tsx and replace the content:

   // ./src/app/page.tsx (original)
   import { Button } from "@mui/material";
   
   export default function Home() {
     return (
       <div>
         <Button>foo</Button>
       </div>
     );
   }

   to

   // ./src/app/page.tsx (new)
   import { Alert, Button } from "@mui/material";
   
   export default function Home() {
     return (
       <div>
         <Button>foo</Button>
         <Alert severity="error">This is an error alert — check it out!</Alert>
       </div>
     );
   }

7. Save

Current vs. Expected behavior

The page reloads and a series of warnings and errors appears:

TypeError: Cannot read properties of undefined (reading 'call')
    at options.factory (webpack.js?v=1723876266036:713:31)
    at __webpack_require__ (webpack.js?v=1723876266036:37:33)
    at fn (webpack.js?v=1723876266036:369:21)
    at initializeModuleChunk (react-server-dom-webpack-client.browser.development.js:906:27)
    at readChunk (react-server-dom-webpack-client.browser.development.js:779:11)
    at react-stack-bottom-frame (react-dom-client.development.js:22220:18)
    at beginWork (react-dom-client.development.js:9348:24)
    at runWithFiberInDEV (react-dom-client.development.js:540:16)
    at performUnitOfWork (react-dom-client.development.js:14831:22)
    at workLoopConcurrent (react-dom-client.development.js:14825:9)
    at renderRootConcurrent (react-dom-client.development.js:14800:15)
    at performConcurrentWorkOnRoot (react-dom-client.development.js:14143:11)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:44:48)

The above error occurred in the <NotFoundErrorBoundary> component.

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.

[Fast Refresh] performing full reload

Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree.
You might have a file which exports a React component but also exports a value that is imported by a non-React component file.
Consider migrating the non-React component export to a separate file and importing it into both files.

It is also possible the parent component of the component you edited is a class component, which disables Fast Refresh.
Fast Refresh requires at least one parent function component in your React tree.

I expect it to not error and just React refresh. The issue is also present on stable albeit with different console output.

Note that it happens with any new component that I import from @mui/material and it doesn't seem to matter whether I import them from the top-level, or from their subpath (@mui/material/Button).

When I add 'use client' to the page, the issue doesn't happen.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:16:51 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 18.20.2
  npm: 10.5.0
  Yarn: 1.22.22
  pnpm: 9.7.1
Relevant Packages:
  next: 15.0.0-canary.119 // Latest available version is detected (15.0.0-canary.119).
  eslint-config-next: N/A
  react: 19.0.0-rc-1eaccd82-20240816
  react-dom: 19.0.0-rc-1eaccd82-20240816
  typescript: 5.5.4
Next.js Config:
  output: N/A

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

Developer Experience

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

next dev (local)

Additional context

Was testing out some upcoming changes in MUI when I noticed this problem