Repository: next.js
Issue: Error and reload during HMR with MUI 
Labels: bug

### 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)
1. Run `pnpm install`
1. Run `pnpm dev`
1. Open http://localhost:3000/
1. Open browser devtools, make sure it preserves logs on reload (e.g. on Chrome console settings: "preserve log")
1. Open **src/app/page.tsx** and replace the content:

    ```tsx
    // ./src/app/page.tsx (original)
    import { Button } from "@mui/material";
    
    export default function Home() {
      return (
        <div>
          <Button>foo</Button>
        </div>
      );
    }
    ``` 
    to
    ```tsx
    // ./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>
      );
    }
    ```
1. 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

```bash
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](https://github.com/mui/material-ui/pull/43294) in MUI when I noticed this problem