fix global-error styles

crates/next-core/src/app_page_loader_tree.rs

@@ -311,7 +311,7 @@ impl AppPageLoaderTreeBuilder {
             page,
             default,
             error,
-            global_error: _,
+            global_error,
             layout,
             loading,
             template,
@@ -344,6 +344,8 @@ impl AppPageLoaderTreeBuilder {
             .await?;
         self.write_modules_entry(AppDirModuleType::DefaultPage, *default)
             .await?;
+        self.write_modules_entry(AppDirModuleType::GlobalError, *global_error)
+            .await?;
 
         let modules_code = replace(&mut self.loader_tree_code, temp_loader_tree_code);
 

crates/next-core/src/base_loader_tree.rs

@@ -28,6 +28,7 @@ pub enum AppDirModuleType {
     Loading,
     Template,
     NotFound,
+    GlobalError,
 }
 
 impl AppDirModuleType {
@@ -40,6 +41,7 @@ impl AppDirModuleType {
             AppDirModuleType::Loading => "loading",
             AppDirModuleType::Template => "template",
             AppDirModuleType::NotFound => "not-found",
+            AppDirModuleType::GlobalError => "global-error",
         }
     }
 }

packages/next/src/build/webpack/loaders/next-app-loader/index.ts

@@ -60,6 +60,7 @@ const FILE_TYPES = {
   error: 'error',
   loading: 'loading',
   'not-found': 'not-found',
+  'global-error': 'global-error',
 } as const
 
 const GLOBAL_ERROR_FILE_TYPE = 'global-error'

packages/next/src/client/app-index.tsx

@@ -185,7 +185,7 @@ function ServerRoot(): React.ReactNode {
   const router = (
     <AppRouter
       actionQueue={actionQueue}
-      globalErrorComponent={initialRSCPayload.G}
+      globalErrorComponentAndStyles={initialRSCPayload.G}
       assetPrefix={initialRSCPayload.p}
     />
   )

packages/next/src/client/components/app-router.tsx

@@ -622,17 +622,20 @@ function Router({
 
 export default function AppRouter({
   actionQueue,
-  globalErrorComponent,
+  globalErrorComponentAndStyles: [globalErrorComponent, globalErrorStyles],
   assetPrefix,
 }: {
   actionQueue: AppRouterActionQueue
-  globalErrorComponent: ErrorComponent
+  globalErrorComponentAndStyles: [ErrorComponent, React.ReactNode | undefined]
   assetPrefix: string
 }) {
   useNavFailureHandler()
 
   return (
-    <ErrorBoundary errorComponent={globalErrorComponent}>
+    <ErrorBoundary
+      errorComponent={globalErrorComponent}
+      errorStyles={globalErrorStyles}
+    >
       <Router actionQueue={actionQueue} assetPrefix={assetPrefix} />
     </ErrorBoundary>
   )

packages/next/src/server/app-render/app-render.tsx

@@ -162,6 +162,8 @@ import { InvariantError } from '../../shared/lib/invariant-error'
 
 import './clean-async-snapshot.external'
 import { INFINITE_CACHE } from '../../lib/constants'
+import { createComponentStylesAndScripts } from './create-component-styles-and-scripts'
+import { parseLoaderTree } from './parse-loader-tree'
 
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]
@@ -724,6 +726,8 @@ async function getRSCPayload(
     </React.Fragment>
   )
 
+  const globalErrorStyles = await getGlobalErrorStyles(tree, ctx)
+
   return {
     // See the comment above the `Preloads` component (below) for why this is part of the payload
     P: <Preloads preloadCallbacks={preloadCallbacks} />,
@@ -733,7 +737,7 @@ async function getRSCPayload(
     i: !!couldBeIntercepted,
     f: [[initialTree, seedData, initialHead]],
     m: missingSlots,
-    G: GlobalError,
+    G: [GlobalError, globalErrorStyles],
     s: typeof ctx.renderOpts.postponed === 'string',
     S: workStore.isStaticGeneration,
   }
@@ -818,14 +822,16 @@ async function getErrorRSCPayload(
     null,
   ]
 
+  const globalErrorStyles = await getGlobalErrorStyles(tree, ctx)
+
   return {
     b: ctx.renderOpts.buildId,
     p: ctx.assetPrefix,
     c: prepareInitialCanonicalUrl(url),
     m: undefined,
     i: false,
     f: [[initialTree, initialSeedData, initialHead]],
-    G: GlobalError,
+    G: [GlobalError, globalErrorStyles],
     s: typeof ctx.renderOpts.postponed === 'string',
     S: workStore.isStaticGeneration,
   } satisfies InitialRSCPayload
@@ -882,7 +888,7 @@ function App<T>({
       <ServerInsertedHTMLProvider>
         <AppRouter
           actionQueue={actionQueue}
-          globalErrorComponent={response.G}
+          globalErrorComponentAndStyles={response.G}
           assetPrefix={response.p}
         />
       </ServerInsertedHTMLProvider>
@@ -931,7 +937,7 @@ function AppWithoutContext<T>({
   return (
     <AppRouter
       actionQueue={actionQueue}
-      globalErrorComponent={response.G}
+      globalErrorComponentAndStyles={response.G}
       assetPrefix={response.p}
     />
   )
@@ -3814,3 +3820,26 @@ export async function warmFlightResponse(
     chunkListeners.push(r)
   })
 }
+
+const getGlobalErrorStyles = async (
+  tree: LoaderTree,
+  ctx: AppRenderContext
+): Promise<React.ReactNode | undefined> => {
+  const {
+    modules: { 'global-error': globalErrorModule },
+  } = parseLoaderTree(tree)
+
+  let globalErrorStyles
+  if (globalErrorModule) {
+    const [, styles] = await createComponentStylesAndScripts({
+      ctx,
+      filePath: globalErrorModule[1],
+      getComponent: globalErrorModule[0],
+      injectedCSS: new Set(),
+      injectedJS: new Set(),
+    })
+    globalErrorStyles = styles
+  }
+
+  return globalErrorStyles
+}

packages/next/src/server/app-render/types.ts

@@ -226,7 +226,7 @@ export type InitialRSCPayload = {
   /** missingSlots */
   m: Set<string> | undefined
   /** GlobalError */
-  G: React.ComponentType<any>
+  G: [React.ComponentType<any>, React.ReactNode | undefined]
   /** postponed */
   s: boolean
   /** prerendered */

test/e2e/app-dir/global-error/with-style-import/app/global-error.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import './global.css'
+
+export default function GlobalError() {
+  return (
+    <html>
+      <body>
+        <h2>Error!</h2>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/global-error/with-style-import/app/global.css

@@ -0,0 +1,3 @@
+h2 {
+  color: yellow;
+}

test/e2e/app-dir/global-error/with-style-import/app/layout.tsx

@@ -0,0 +1,12 @@
+// to avoid bailing out of the build
+export const dynamic = 'force-dynamic'
+
+export default function RootLayout({ children }) {
+  throw new Error('Root Layout Error')
+
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}

test/e2e/app-dir/global-error/with-style-import/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <p>Home</p>
+}

test/e2e/app-dir/global-error/with-style-import/index.test.ts

@@ -0,0 +1,30 @@
+import { assertHasRedbox, getRedboxHeader } from 'next-test-utils'
+import { nextTestSetup } from 'e2e-utils'
+
+async function testDev(browser, errorRegex) {
+  await assertHasRedbox(browser)
+  expect(await getRedboxHeader(browser)).toMatch(errorRegex)
+}
+
+describe('app dir - global error - with style import', () => {
+  const { next, isNextDev, skipped } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+  })
+
+  if (skipped) {
+    return
+  }
+
+  it('should render global error with correct styles', async () => {
+    const browser = await next.browser('/')
+
+    if (isNextDev) {
+      await testDev(browser, /Root Layout Error/)
+      return
+    }
+
+    const h2 = await browser.elementByCss('h2')
+    expect(await h2.getComputedCss('color')).toBe('rgb(255, 255, 0)') // yellow
+  })
+})