Use AppRouterContext instead of publicAppRouterInstance

error-boundary.tsx imported publicAppRouterInstance from app-router-instance.ts, which transitively pulls in the entire App Router module graph (router-reducer → fetch-server-response →
  react-server-dom-webpack/client). This broke any non-App-Router context (e.g. Pages Router) that imports a module depending on error-boundary.tsx, since react-server-dom-webpack/client is
  unavailable there. Replace with AppRouterContext from the lightweight shared-runtime module, which only contains type imports and React context creation — no heavy runtime dependencies. The error
  boundary already renders inside the AppRouterContext.Provider scope, so this.context always has the router instance for segment-level boundaries.

Author: devjiwonchoi

packages/next/src/client/components/error-boundary.tsx

@@ -6,7 +6,10 @@ import { isNextRouterError } from './is-next-router-error'
 import { handleHardNavError } from './nav-failure-handler'
 import { HandleISRError } from './handle-isr-error'
 import { isBot } from '../../shared/lib/router/utils/is-bot'
-import { publicAppRouterInstance } from './app-router-instance'
+import {
+  AppRouterContext,
+  type AppRouterInstance,
+} from '../../shared/lib/app-router-context.shared-runtime'
 
 const isBotUserAgent =
   typeof window !== 'undefined' && isBot(window.navigator.userAgent)
@@ -43,6 +46,9 @@ export class ErrorBoundaryHandler extends React.Component<
   ErrorBoundaryHandlerProps,
   ErrorBoundaryHandlerState
 > {
+  static contextType = AppRouterContext
+  declare context: AppRouterInstance | null
+
   constructor(props: ErrorBoundaryHandlerProps) {
     super(props)
     this.state = {
@@ -128,7 +134,7 @@ export class ErrorBoundaryHandler extends React.Component<
 
   retry = () => {
     startTransition(() => {
-      publicAppRouterInstance.refresh()
+      this.context?.refresh()
       this.reset()
     })
   }

packages/next/src/next-devtools/userspace/app/app-dev-overlay-error-boundary.tsx

@@ -4,8 +4,11 @@ import { RuntimeErrorHandler } from '../../../client/dev/runtime-error-handler'
 import { ErrorBoundary } from '../../../client/components/error-boundary'
 import DefaultGlobalError from '../../../client/components/builtin/global-error'
 import type { GlobalErrorState } from '../../../client/components/app-router-instance'
-import { publicAppRouterInstance } from '../../../client/components/app-router-instance'
 import { SEGMENT_EXPLORER_SIMULATED_ERROR_MESSAGE } from './segment-explorer-node'
+import {
+  AppRouterContext,
+  type AppRouterInstance,
+} from '../../../shared/lib/app-router-context.shared-runtime'
 
 type AppDevOverlayErrorBoundaryProps = {
   children: React.ReactNode
@@ -60,6 +63,9 @@ export class AppDevOverlayErrorBoundary extends PureComponent<
   AppDevOverlayErrorBoundaryProps,
   AppDevOverlayErrorBoundaryState
 > {
+  static contextType = AppRouterContext
+  declare context: AppRouterInstance | null
+
   state: AppDevOverlayErrorBoundaryState = {
     reactError: null,
     componentStack: undefined,
@@ -95,7 +101,7 @@ export class AppDevOverlayErrorBoundary extends PureComponent<
 
   retry = () => {
     startTransition(() => {
-      publicAppRouterInstance.refresh()
+      this.context?.refresh()
       this.reset()
     })
   }