Repository: next.js
Issue: Next.js throws `RangeError: Maximum call stack size exceeded` when running `yarn build`
Labels: bug

### Link to the code that reproduces this issue

https://github.com/danieltroger/react-server-components-stuff/tree/dt/next_infinite_loop

### To Reproduce

1. `git clone git@github.com:danieltroger/react-server-components-stuff.git`
2. `cd react-server-components-stuff`
3. `git checkout dt/next_infinite_loop`
4. `yarn build`

### Current vs. Expected behavior

**Current behavior:**

```
RangeError: Maximum call stack size exceeded
    at nO (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:60707)
    at nR (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:45694)
    at nT (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46289)
    at nO (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62795)
    at nR (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:45694)
    at nT (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46289)
    at nO (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62795)
    at nR (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:45694)
    at nT (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:46289)
    at nO (/private/tmp/nextjs/nextjs-app-router-examples/.yarn/__virtual__/next-virtual-d2b131c8dd/5/Users/daniel/.yarn/berry/cache/next-npm-14.0.3-canary.9-630a1159b2-10c0.zip/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62795)
```


<b>Expected behavior:</b>
```
Error: Component nesting too deep, might exceed maximum call stack size soon. This usually happens if you have a component that recurses infinitely. Top of component stack:
SearchPage: app/components/SearchPage.tsx:4
SearchPage: app/components/SearchPage.tsx:4
SearchPage: app/components/SearchPage.tsx:4
SearchPage: app/components/SearchPage.tsx:4
SearchPage: app/components/SearchPage.tsx:4
SearchPage: app/components/SearchPage.tsx:4
SearchPage: app/components/SearchPage.tsx:4
SearchPage: app/components/SearchPage.tsx:4
```

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
Binaries:
  Node: 20.5.0
  npm: 9.8.0
  Yarn: 4.0.1
  pnpm: 8.7.5
Relevant Packages:
  next: 14.0.3-canary.9
  eslint-config-next: 14.0.2
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Not sure

### Additional context

I wasted an embarrassingly long time on stepping through react internals for this (the function in the stack trace of the error that infinite loops' source code is here https://github.com/facebook/react/blob/593ecee66a609d4a4c2b36b39b1e5e23b2456dd1/packages/react-server/src/ReactFizzServer.js#L2168) when it's actually my fault. The reason this happened is because I forgot an import here: https://github.com/danieltroger/react-server-components-stuff/blob/dt/next_infinite_loop/app/components/SearchPage.tsx (it should be `import { SearchPage } from "@depict-ai/react-ui"`)

BUT the reason I'm reporting this as a bug is because my feeling is that next/react has the philosophy of displaying user friendly error messages when doing something wrong (I partly blame that I introduced this on running into `5:16  Error: Component definition is missing display name  react/display-name` so I called the function something without thinking about it). And I think this error message is the absolute opposite of user friendly. It leaves someone encountering this two options: debugging react, which leads to nothing because the variables in scope where it infinite loops aren't helpful or just changing random things in ones app until one discovers the infinite loop.

Both are not optimal. I'd love to see an improved error message, as detailed in the `Expected behavior` section