Fix not-found handling in turbopack (#51735)

Adds the overlay changes from #51637 Fixes: https://github.com/vercel/next.js/actions/runs/5362063391/jobs/9728782834
vercel · Jun 24, 2023 · 2c5cf40 · 2c5cf40
1 parent 74a5d20
commit 2c5cf40
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/packages/next-swc/crates/next-core/js/src/dev/hot-reloader.tsx b/packages/next-swc/crates/next-core/js/src/dev/hot-reloader.tsx
@@ -5,12 +5,22 @@ import { useRouter, usePathname } from 'next/dist/client/components/navigation'
 import { useEffect } from 'react'
 import { subscribeToUpdate } from '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client'
 import { ReactDevOverlay } from './client'
+import { NotFoundBoundary } from 'next/dist/client/components/not-found-boundary'
 
 type HotReloadProps = React.PropsWithChildren<{
   assetPrefix?: string
+  notFound?: React.ReactNode
+  notFoundStyles?: React.ReactNode
+  asNotFound?: boolean
 }>
 
-export default function HotReload({ assetPrefix, children }: HotReloadProps) {
+export default function HotReload({
+  assetPrefix,
+  children,
+  notFound,
+  notFoundStyles,
+  asNotFound,
+}: HotReloadProps) {
   const router = useRouter()
   const path = usePathname()!.slice(1)
 
@@ -31,5 +41,14 @@ export default function HotReload({ assetPrefix, children }: HotReloadProps) {
     return unsubscribe
   }, [router, path])
 
-  return <ReactDevOverlay globalOverlay={true}>{children}</ReactDevOverlay>
+  return (
+    <NotFoundBoundary
+      key={asNotFound + ''}
+      notFound={notFound}
+      notFoundStyles={notFoundStyles}
+      asNotFound={asNotFound}
+    >
+      <ReactDevOverlay globalOverlay={true}>{children}</ReactDevOverlay>
+    </NotFoundBoundary>
+  )
 }
diff --git a/packages/next-swc/crates/next-core/js/src/overlay/internal/ReactDevOverlay.tsx b/packages/next-swc/crates/next-core/js/src/overlay/internal/ReactDevOverlay.tsx
@@ -7,6 +7,7 @@ import { ErrorBoundary } from './ErrorBoundary'
 import { Base } from './styles/Base'
 import { ComponentStyles } from './styles/ComponentStyles'
 import { CssReset } from './styles/CssReset'
+import { notFound } from 'next/dist/client/components/not-found'
 
 type RefreshState =
   | {
@@ -33,6 +34,8 @@ type OverlayState = {
   refreshState: RefreshState
 
   reactError: Error | null
+
+  notFound?: boolean
 }
 
 function pushErrorFilterDuplicates(
@@ -51,7 +54,7 @@ function pushErrorFilterDuplicates(
 function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
   switch (ev.type) {
     case Bus.TYPE_BUILD_OK: {
-      return { ...state }
+      return { ...state, notFound: false }
     }
     case Bus.TYPE_TURBOPACK_ISSUES: {
       return { ...state, issues: ev.issues }
@@ -65,6 +68,7 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
     case Bus.TYPE_REFRESH: {
       return {
         ...state,
+        notFound: false,
         errors:
           // Errors can come in during updates. In this case, UNHANDLED_ERROR
           // and UNHANDLED_REJECTION events might be dispatched between the
@@ -112,6 +116,9 @@ function reducer(state: OverlayState, ev: Bus.BusEvent): OverlayState {
           return state
       }
     }
+    case Bus.TYPE_NOT_FOUND: {
+      return { ...state, notFound: true }
+    }
     case Bus.TYPE_REACT_ERROR: {
       switch (state.refreshState.type) {
         case 'idle': {
@@ -203,6 +210,10 @@ export default function ReactDevOverlay({
 
   const isMounted = hasBuildError || hasRuntimeErrors
 
+  if (state.notFound) {
+    notFound()
+  }
+
   return (
     <React.Fragment>
       <ErrorBoundary

diff --git a/packages/next-swc/crates/next-core/js/src/overlay/internal/bus.ts b/packages/next-swc/crates/next-core/js/src/overlay/internal/bus.ts
@@ -7,6 +7,7 @@ export const TYPE_REFRESH = 'fast-refresh'
 export const TYPE_UNHANDLED_ERROR = 'unhandled-error'
 export const TYPE_UNHANDLED_REJECTION = 'unhandled-rejection'
 export const TYPE_REACT_ERROR = 'react-error'
+export const TYPE_NOT_FOUND = 'not-found'
 
 export type BuildOk = { type: typeof TYPE_BUILD_OK }
 export type TurbopackIssues = {
@@ -31,6 +32,10 @@ export type ReactError = {
   componentStack: string | null
 }
 
+export type NotFoundAction = {
+  type: typeof TYPE_NOT_FOUND
+}
+
 export type BusEvent =
   | BuildOk
   | TurbopackIssues
@@ -39,6 +44,7 @@ export type BusEvent =
   | UnhandledError
   | UnhandledRejection
   | ReactError
+  | NotFoundAction
 
 export type BusEventHandler = (ev: BusEvent) => void