From 4fee739e10b53101acfded2c3c7c3cd3a15b589e Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Fri, 2 Sep 2022 14:05:02 +0200
Subject: [PATCH] fix 404 route in dev

---
 packages/next/build/entries.ts           |  4 +++-
 packages/next/build/index.ts             |  3 +++
 packages/next/server/dev/hot-reloader.ts | 27 ++++++++++++------------
 test/e2e/app-dir/rsc-basic.test.ts       |  8 +++++++
 4 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
index 2d558ae91c1..aed59e8e069 100644
--- a/packages/next/build/entries.ts
+++ b/packages/next/build/entries.ts
@@ -69,12 +69,14 @@ export function createPagesMapping({
   pageExtensions,
   pagePaths,
   pagesType,
+  pagesDir,
 }: {
   hasServerComponents: boolean
   isDev: boolean
   pageExtensions: string[]
   pagePaths: string[]
   pagesType: 'pages' | 'root' | 'app'
+  pagesDir: string | undefined
 }): { [page: string]: string } {
   const previousPages: { [key: string]: string } = {}
   const pages = pagePaths.reduce<{ [key: string]: string }>(
@@ -133,7 +135,7 @@ export function createPagesMapping({
   // In development we always alias these to allow Webpack to fallback to
   // the correct source file so that HMR can work properly when a file is
   // added or removed.
-  const root = isDev ? PAGES_DIR_ALIAS : 'next/dist/pages'
+  const root = isDev && pagesDir ? PAGES_DIR_ALIAS : 'next/dist/pages'
 
   return {
     '/_app': `${root}/_app`,
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index d311eb80367..7e3fedd224e 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -494,6 +494,7 @@ export default async function build(
             pageExtensions: config.pageExtensions,
             pagesType: 'pages',
             pagePaths: pagesPaths,
+            pagesDir,
           })
         )
 
@@ -509,6 +510,7 @@ export default async function build(
               isDev: false,
               pagesType: 'app',
               pageExtensions: config.pageExtensions,
+              pagesDir: pagesDir,
             })
           )
       }
@@ -521,6 +523,7 @@ export default async function build(
           pageExtensions: config.pageExtensions,
           pagePaths: rootPaths,
           pagesType: 'root',
+          pagesDir: pagesDir,
         })
       }
 
diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts
index 68e05821c8e..921706767ce 100644
--- a/packages/next/server/dev/hot-reloader.ts
+++ b/packages/next/server/dev/hot-reloader.ts
@@ -421,19 +421,20 @@ export default class HotReloader {
               ])
             )
 
-      this.pagesMapping = !this.pagesDir
-        ? {}
-        : webpackConfigSpan.traceChild('create-pages-mapping').traceFn(() =>
-            createPagesMapping({
-              hasServerComponents: this.hasServerComponents,
-              isDev: true,
-              pageExtensions: this.config.pageExtensions,
-              pagesType: 'pages',
-              pagePaths: pagePaths.filter(
-                (i: string | null): i is string => typeof i === 'string'
-              ),
-            })
-          )
+      this.pagesMapping = webpackConfigSpan
+        .traceChild('create-pages-mapping')
+        .traceFn(() =>
+          createPagesMapping({
+            hasServerComponents: this.hasServerComponents,
+            isDev: true,
+            pageExtensions: this.config.pageExtensions,
+            pagesType: 'pages',
+            pagePaths: pagePaths.filter(
+              (i: string | null): i is string => typeof i === 'string'
+            ),
+            pagesDir: this.pagesDir,
+          })
+        )
 
       const entrypoints = await webpackConfigSpan
         .traceChild('create-entrypoints')
diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts
index 0f91f92f807..4b9b3471992 100644
--- a/test/e2e/app-dir/rsc-basic.test.ts
+++ b/test/e2e/app-dir/rsc-basic.test.ts
@@ -262,6 +262,14 @@ describe('app dir - react server components', () => {
     expect(manipulated).toBe(undefined)
   })
 
+  it('should render built-in 404 page for missing route if pagesDir is not presented', async () => {
+    const res = await fetchViaHTTP(next.url, '/does-not-exist')
+
+    expect(res.status).toBe(404)
+    const html = await res.text()
+    expect(html).toContain('This page could not be found')
+  })
+
   it('should suspense next/image in server components', async () => {
     const imageHTML = await renderViaHTTP(next.url, '/next-api/image')
     const imageTag = getNodeBySelector(imageHTML, '#myimg')