From bf405c38ebff80497a49badfa49c8068514e02c1 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Wed, 20 Apr 2022 07:03:48 -0500
Subject: [PATCH] Ensure error is cleared for missing global css (#36292)

This ensures we strip ansi encoding from serialized errors as it causes the error to be illegible when rendered. This also adds a test for global CSS import being missing and then fixed.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
---
 packages/next/server/render.tsx               |  3 +-
 .../ReactRefreshLogBox-builtins.test.ts       | 45 +++++++++++++++++++
 .../ReactRefreshLogBox-builtins.test.ts.snap  | 13 ++++++
 3 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index 6f9191547645c00..dc1ddc3611c7a34 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -78,6 +78,7 @@ import {
 import { ImageConfigContext } from '../shared/lib/image-config-context'
 import { FlushEffectsContext } from '../shared/lib/flush-effects'
 import { interopDefault } from '../lib/interop-default'
+import stripAnsi from 'next/dist/compiled/strip-ansi'
 
 let optimizeAmp: typeof import('./optimize-amp').default
 let getFontDefinitionFromManifest: typeof import('./font-utils').getFontDefinitionFromManifest
@@ -1744,7 +1745,7 @@ export async function renderToHTML(
 function errorToJSON(err: Error) {
   return {
     name: err.name,
-    message: err.message,
+    message: stripAnsi(err.message),
     stack: err.stack,
     middleware: (err as any).middleware,
   }
diff --git a/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts b/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts
index 23d9e37e454fc06..87a2439ea3adda8 100644
--- a/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts
+++ b/test/development/acceptance/ReactRefreshLogBox-builtins.test.ts
@@ -100,4 +100,49 @@ describe('ReactRefreshLogBox', () => {
 
     await cleanup()
   })
+
+  test('Module not found (missing global CSS)', async () => {
+    const { session, cleanup } = await sandbox(
+      next,
+      new Map([
+        [
+          'pages/_app.js',
+          `
+        import './non-existent.css'
+        
+        export default function App({ Component, pageProps }) {
+          return <Component {...pageProps} />
+        }
+      `,
+        ],
+        [
+          'pages/index.js',
+          `
+        export default function Page(props) {
+          return <p>index page</p>
+        }
+      `,
+        ],
+      ])
+    )
+    expect(await session.hasRedbox(true)).toBe(true)
+
+    const source = await session.getRedboxSource()
+    expect(source).toMatchSnapshot()
+
+    await session.patch(
+      'pages/_app.js',
+      `
+      export default function App({ Component, pageProps }) {
+        return <Component {...pageProps} />
+      }
+    `
+    )
+    expect(await session.hasRedbox(false)).toBe(false)
+    expect(
+      await session.evaluate(() => document.documentElement.innerHTML)
+    ).toContain('index page')
+
+    await cleanup()
+  })
 })
diff --git a/test/development/acceptance/__snapshots__/ReactRefreshLogBox-builtins.test.ts.snap b/test/development/acceptance/__snapshots__/ReactRefreshLogBox-builtins.test.ts.snap
index b712f13edeeebe7..910dd68ed5f2b30 100644
--- a/test/development/acceptance/__snapshots__/ReactRefreshLogBox-builtins.test.ts.snap
+++ b/test/development/acceptance/__snapshots__/ReactRefreshLogBox-builtins.test.ts.snap
@@ -11,6 +11,19 @@ Module not found: Can't resolve 'b'
 https://nextjs.org/docs/messages/module-not-found"
 `;
 
+exports[`ReactRefreshLogBox Module not found (missing global CSS) 1`] = `
+"./pages/_app.js:2:8
+Module not found: Can't resolve './non-existent.css'
+  1 | 
+> 2 |         import './non-existent.css'
+    |        ^
+  3 |         
+  4 |         export default function App({ Component, pageProps }) {
+  5 |           return <Component {...pageProps} />
+
+https://nextjs.org/docs/messages/module-not-found"
+`;
+
 exports[`ReactRefreshLogBox Module not found 1`] = `
 "./index.js:1:0
 Module not found: Can't resolve 'b'