ensure DIO development segment errors are cleared after correcting

Author: ztanner

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,9 @@ 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()
         }
       }
 

test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts

@@ -1,12 +1,16 @@
 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({
@@ -67,4 +71,52 @@ describe('Dynamic IO Dev Errors', () => {
     expect(stack).toContain('Root [Server]')
     expect(stack).toContain('<anonymous> (2:1)')
   })
+
+  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()
+  })
 })