Do not duplicate compilation errors

packages/next/server/hot-reloader.ts

@@ -32,7 +32,11 @@ import { isWriteable } from '../build/is-writeable'
 import { ClientPagesLoaderOptions } from '../build/webpack/loaders/next-client-pages-loader'
 import { stringify } from 'querystring'
 
-export async function renderScriptError(res: ServerResponse, error: Error) {
+export async function renderScriptError(
+  res: ServerResponse,
+  error: Error,
+  { verbose = true } = {}
+) {
   // Asks CDNs and others to not to cache the errored page
   res.setHeader(
     'Cache-Control',
@@ -48,7 +52,9 @@ export async function renderScriptError(res: ServerResponse, error: Error) {
     return
   }
 
-  console.error(error.stack)
+  if (verbose) {
+    console.error(error.stack)
+  }
   res.statusCode = 500
   res.end('500 - Internal Error')
 }
@@ -213,7 +219,7 @@ export default class HotReloader {
 
         const errors = await this.getCompilationErrors(page)
         if (errors.length > 0) {
-          await renderScriptError(pageBundleRes, errors[0])
+          await renderScriptError(pageBundleRes, errors[0], { verbose: false })
           return { finished: true }
         }
       }

test/integration/no-duplicate-compile-error/next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+}

test/integration/no-duplicate-compile-error/pages/index.js

@@ -0,0 +1,3 @@
+export default function Abc() {
+  return <div id="a">hello</div>
+}

test/integration/no-duplicate-compile-error/test/index.test.js

@@ -0,0 +1,75 @@
+/* eslint-env jest */
+import {
+  check,
+  File,
+  findPort,
+  hasRedbox,
+  killApp,
+  launchApp,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 3)
+
+const appDir = join(__dirname, '../')
+
+describe('no duplicate compile error output', () => {
+  it('show not show compile error on page refresh', async () => {
+    let stdout = ''
+    let stderr = ''
+
+    const appPort = await findPort()
+    const app = await launchApp(appDir, appPort, {
+      env: { __NEXT_TEST_WITH_DEVTOOL: true },
+      onStdout(msg) {
+        stdout += msg || ''
+      },
+      onStderr(msg) {
+        stderr += msg || ''
+      },
+    })
+
+    const browser = await webdriver(appPort, '/')
+
+    await browser.waitForElementByCss('#a')
+
+    const f = new File(join(appDir, 'pages', 'index.js'))
+    f.replace('<div id="a">hello</div>', '<div id="a"!>hello</div>')
+
+    try {
+      // Wait for compile error:
+      expect(await hasRedbox(browser, true)).toBe(true)
+
+      await browser.refresh()
+
+      // Wait for compile error to re-appear:
+      expect(await hasRedbox(browser, true)).toBe(true)
+    } finally {
+      f.restore()
+    }
+
+    // Wait for compile error to disappear:
+    await check(
+      () => hasRedbox(browser, false).then((r) => (r ? 'yes' : 'no')),
+      /no/
+    )
+    await browser.waitForElementByCss('#a')
+
+    function getRegexCount(str, regex) {
+      return (str.match(regex) || []).length
+    }
+
+    const correctMessagesRegex = /error - [^\r\n]+\r?\n[^\r\n]+Unexpected token/g
+    const totalMessagesRegex = /Unexpected token/g
+
+    const correctMessages = getRegexCount(stdout, correctMessagesRegex)
+    const totalMessages = getRegexCount(stdout, totalMessagesRegex)
+
+    expect(correctMessages).toBeGreaterThanOrEqual(1)
+    expect(correctMessages).toBe(totalMessages)
+    expect(stderr).toBe('')
+
+    await killApp(app)
+  })
+})