From aeb40b7b4739321ea30eb4abe35bd9c723f71159 Mon Sep 17 00:00:00 2001
From: Zack Tanner <1939140+ztanner@users.noreply.github.com>
Date: Thu, 24 Oct 2024 10:51:09 -0700
Subject: [PATCH] ensure DIO development segment errors are cleared after
 correcting (#71811)

This clears segment config errors that are corrected in development mode
when using `dynamicIO`.
---
 .../lib/router-utils/setup-dev-bundler.ts     |  5 ++
 .../dynamic-io-dev-errors.test.ts             | 58 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/server/lib/router-utils/setup-dev-bundler.ts b/packages/next/src/server/lib/router-utils/setup-dev-bundler.ts
index 228fbdc60e5d5..1b396f3d6684a 100644
--- a/packages/next/src/server/lib/router-utils/setup-dev-bundler.ts
+++ b/packages/next/src/server/lib/router-utils/setup-dev-bundler.ts
@@ -289,6 +289,7 @@ async function startWatcher(opts: SetupOpts) {
     let enabledTypeScript = usingTypeScript
     let previousClientRouterFilters: any
     let previousConflictingPagePaths: Set<string> = new Set()
+    let previouslyHadSegmentError = false
 
     wp.on('aggregated', async () => {
       let middlewareMatchers: MiddlewareMatcher[] | undefined
@@ -569,6 +570,10 @@ async function startWatcher(opts: SetupOpts) {
           const errorMessage = `The following pages used segment configs which are not supported with "experimental.dynamicIO" and must be removed to build your application:\n${pagesWithIncompatibleSegmentConfigs.join('\n')}\n`
           Log.error(errorMessage)
           hotReloader.setHmrServerError(new Error(errorMessage))
+          previouslyHadSegmentError = true
+        } else if (previouslyHadSegmentError) {
+          hotReloader.clearHmrServerError()
+          previouslyHadSegmentError = false
         }
       }
 
diff --git a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
index 8f48695a3bbab..1e52e88f10c2e 100644
--- a/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
+++ b/test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts
@@ -1,15 +1,19 @@
 import { nextTestSetup } from 'e2e-utils'
 import {
   assertHasRedbox,
+  assertNoRedbox,
   getRedboxCallStack,
   getRedboxDescription,
   hasErrorToast,
   retry,
   waitForAndOpenRuntimeError,
+  getRedboxSource,
 } from 'next-test-utils'
+import { sandbox } from 'development-sandbox'
+import { outdent } from 'outdent'
 
 describe('Dynamic IO Dev Errors', () => {
-  const { next } = nextTestSetup({
+  const { next, isTurbopack } = nextTestSetup({
     files: __dirname,
   })
 
@@ -67,4 +71,56 @@ describe('Dynamic IO Dev Errors', () => {
     expect(stack).toContain('Root [Server]')
     expect(stack).toContain('<anonymous> (2:1)')
   })
+
+  // `setHmrServerError` is not currently implemented in Turbopack
+  // we will need to enable this after it gets implemented.
+  if (!isTurbopack) {
+    it('should clear segment errors after correcting them', async () => {
+      const { cleanup, session, browser } = await sandbox(
+        next,
+        new Map([
+          [
+            'app/page.tsx',
+            outdent`
+          export const revalidate = 10
+          export default function Page() {
+            return (
+              <div>Hello World</div>
+            );
+          }
+        `,
+          ],
+        ])
+      )
+
+      await assertHasRedbox(browser)
+      const redbox = {
+        description: await getRedboxDescription(browser),
+        source: await getRedboxSource(browser),
+      }
+
+      expect(redbox.description).toMatchInlineSnapshot(`"Failed to compile"`)
+      expect(redbox.source).toMatchInlineSnapshot(`
+      "The following pages used segment configs which are not supported with "experimental.dynamicIO" and must be removed to build your application:
+      /: revalidate"
+    `)
+
+      await session.patch(
+        'app/page.tsx',
+        outdent`
+      export default function Page() {
+        return (
+          <div>Hello World</div>
+        );
+      }
+    `
+      )
+
+      await retry(async () => {
+        assertNoRedbox(browser)
+      })
+
+      await cleanup()
+    })
+  }
 })