Fix not exposing server errors in hot reloader (#24331)

Fixes #24056.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.

## Documentation / Examples

- [ ] Make sure the linting passes

packages/next/server/hot-reloader.ts

@@ -612,6 +612,20 @@ export default class HotReloader {
 
       // If none were found we still have to show the other errors
       return this.stats.compilation.errors
+    } else if (this.serverStats?.hasErrors()) {
+      const { compilation } = this.serverStats
+      const failedPages = erroredPages(compilation)
+
+      // If there is an error related to the requesting page we display it instead of the first error
+      if (
+        failedPages[normalizedPage] &&
+        failedPages[normalizedPage].length > 0
+      ) {
+        return failedPages[normalizedPage]
+      }
+
+      // If none were found we still have to show the other errors
+      return this.serverStats.compilation.errors
     }
 
     return []

test/acceptance/ReactRefreshLogBox.dev.test.js

@@ -1381,6 +1381,30 @@ test('_document top level error shows logbox', async () => {
   await cleanup()
 })
 
+test('server-side only compilation errors', async () => {
+  const [session, cleanup] = await sandbox()
+
+  await session.patch(
+    'pages/index.js',
+    `
+      import myLibrary from 'my-non-existent-library'
+      export async function getStaticProps() {
+        return {
+          props: {
+            result: myLibrary()
+          }
+        }
+      }
+      export default function Hello(props) {
+        return <h1>{props.result}</h1>
+      }
+    `
+  )
+
+  expect(await session.hasRedbox(true)).toBe(true)
+  await cleanup()
+})
+
 test('empty _app shows logbox', async () => {
   const [session, cleanup] = await sandbox(
     undefined,