From 55ab4f06b76ce94213929b5560b627b760e6cd05 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 16 Nov 2021 20:18:57 +0100
Subject: [PATCH] Use _error for development in streaming (#31466)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/next/build/entries.ts                |  2 +-
 .../next-middleware-ssr-loader/index.ts       | 19 +++++++++----------
 .../test/index.test.js                        | 14 +++++++++-----
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index a4b97bc00bd4544..42492d511d85354 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -162,7 +162,7 @@ export function createEntrypoints(
           page,
           absoluteAppPath: pages['/_app'],
           absoluteDocumentPath: pages['/_document'],
-          absoluteErrorPath: pages['/_error'],
+          absoluteErrorPath: pages['/500'] || pages['/_error'],
           absolutePagePath,
           isServerComponent: isFlight,
           buildId,
diff --git a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
index bf2fd5bfe8b68af..096a4c06eac9b27 100644
--- a/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
+++ b/packages/next/build/webpack/loaders/next-middleware-ssr-loader/index.ts
@@ -16,7 +16,6 @@ export default async function middlewareRSCLoader(this: any) {
   const stringifiedAbsolutePagePath = stringifyRequest(this, absolutePagePath)
   const stringifiedAbsoluteAppPath = stringifyRequest(this, absoluteAppPath)
   const stringifiedAbsoluteErrorPath = stringifyRequest(this, absoluteErrorPath)
-  const stringified500PagePath = stringifyRequest(this, './pages/500')
   const stringifiedAbsoluteDocumentPath = stringifyRequest(
     this,
     absoluteDocumentPath
@@ -29,13 +28,7 @@ export default async function middlewareRSCLoader(this: any) {
 
         import App from ${stringifiedAbsoluteAppPath}
         import Document from ${stringifiedAbsoluteDocumentPath}
-
-        let ErrorPage
-        try {
-          ErrorPage = require(${stringified500PagePath}).default
-        } catch (_) {
-          ErrorPage = require(${stringifiedAbsoluteErrorPath}).default
-        }
+        const errorMod = require(${stringifiedAbsoluteErrorPath})
 
         const {
           default: Page,
@@ -125,9 +118,15 @@ export default async function middlewareRSCLoader(this: any) {
               result = await renderToHTML(
                 req,
                 errorRes,
-                pathname,
+                '/_error',
                 query,
-                { ...renderOpts, Component: ErrorPage }
+                {
+                  ...renderOpts, 
+                  Component: errorMod.default,
+                  getStaticProps: errorMod.getStaticProps,
+                  getServerSideProps: errorMod.getServerSideProps,
+                  getStaticPaths: errorMod.getStaticPaths,
+                }
               )
             } catch (err) {
               return new Response(
diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
index 371953a331b90ed..423378710db53e0 100644
--- a/test/integration/react-streaming-and-server-components/test/index.test.js
+++ b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -157,7 +157,7 @@ describe('concurrentFeatures - prod', () => {
     expect(html).toContain('foo.client')
   })
 
-  runBasicTests(context)
+  runBasicTests(context, 'prod')
 })
 
 describe('concurrentFeatures - dev', () => {
@@ -182,7 +182,7 @@ describe('concurrentFeatures - dev', () => {
     expect(content).toMatchInlineSnapshot('"foo.client"')
   })
 
-  runBasicTests(context)
+  runBasicTests(context, 'dev')
 })
 
 const cssSuite = {
@@ -213,7 +213,8 @@ const documentSuite = {
 runSuite('document', 'dev', documentSuite)
 runSuite('document', 'prod', documentSuite)
 
-async function runBasicTests(context) {
+async function runBasicTests(context, env) {
+  const isDev = env === 'dev'
   it('should render the correct html', async () => {
     const homeHTML = await renderViaHTTP(context.appPort, '/')
 
@@ -242,7 +243,10 @@ async function runBasicTests(context) {
     expect(dynamicRouteHTML2).toContain('[pid]')
 
     expect(path404HTML).toContain('custom-404-page')
-    expect(path500HTML).toContain('custom-500-page')
+    // in dev mode: custom error page is still using default _error
+    expect(path500HTML).toContain(
+      isDev ? 'Internal Server Error' : 'custom-500-page'
+    )
     expect(pathNotFoundHTML).toContain('custom-404-page')
   })
 
@@ -330,6 +334,6 @@ function runSuite(suiteName, env, { runTests, before, after }) {
       await killApp(context.server)
     })
 
-    runTests(context)
+    runTests(context, env)
   })
 }