Repository: next.js
Issue: Stack trace points to irrelevant lines
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```
   Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.1.1
      eslint-config-next: 13.1.1
      react: 18.2.0
      react-dom: 18.2.0
```

### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/suspicious-haslett-r6dhhh?file=%2Fpages%2Findex.tsx&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A4%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D

### To Reproduce

Unable to reproduce in the sandbox

### Describe the Bug

I was trying to debug why I was getting a next.js hydration error 
<img width="300" alt="hydration_error" src="https://user-images.githubusercontent.com/6489651/218301106-aef345e0-8a43-4a58-80e2-40c40f77baa2.png">

And I saw that the stacktrace was pointing to code that didn't seem very meaningful.
```
Warning: Expected server HTML to contain a matching <div> in <div>.
    at div
    at div
    at div
    at SignIn (webpack-internal:///./src/pages/auth/signin.tsx:16:11)
    at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:454:24)
    at MyApp (webpack-internal:///./src/pages/_app.tsx:23:11)
```

It points to`src/pages/_app.tsx:23:11`
<img width="600" alt="app_code" src="https://user-images.githubusercontent.com/6489651/218301158-fe97567a-64e5-4ed3-975e-718c766d28f6.png">

and then also points to `src/pages/auth/signin.tsx:16:11`
<img width="600" alt="signin_code" src="https://user-images.githubusercontent.com/6489651/218301246-96933739-b559-45ab-ad01-8b5861812a0c.png">

I don't quite get what hydration error means, eventually I found the issue that I was calling localStorage on initial render which is an issue for next.js since it potentially renders the component on the server, where there is no localstorage.
But my problem wasn't that there was a hydration error, it did a great job of warning me I was using next.js incorrectly.
But it is that the stack traces weren't pointing to anything meaningful so they did not help me resolve my error. I was debugging in the dark and had to randomly comment in and out stuff.

Is this a general issue with next.js or something wrong with my webpack settings?? I really just want the stacktrace to point to the line that was causing the issue and I cannot get it to do that.
I stopped and started the server. Deleted and re-installed my node modules. Changed the code to be a on different lines. etc.
No matter what I did the stack trace would seem to be pointing to an empty line instead of the line where I was calling localstorage.

### Expected Behavior

Stacktrace points to the line where I am doing something wrong instead of an empty line

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_