Add an e2e test for the css serving issue (vercel#81683)

lukesandberg · web-flow · commit a04a5efe80d8 · 2025-07-16T11:11:26.000-07:00
## Add a regression test for when a not-found component depends on css and triggers a bug in turbopack To correctly serve js and css resources during server side rendering we construct a client manifest that lists all the server components and their required resources. Turbopack has a bug where we fail to collect css that is used by the page if it is also used by a not-found page (and other error handlers as well). When a not-found component is present all pages pages implicitly depend on this module and depend on it as an early dependency of the generated `app-page.js` file. This means if a `not-found.js` file (or a global error file) would happen to depend on the same css as a normal component we would associate it as a client-reference of that component instead of any other. Then on a server side render we would simply omit it. This PR adds a regression test for this issue. See vercel#77861 and vercel#79535
diff --git a/test/e2e/app-dir/initial-css-not-found/app/(default)/layout.tsx b/test/e2e/app-dir/initial-css-not-found/app/(default)/layout.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react'
+import styles from '../styles.module.css'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={styles.foo}>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/initial-css-not-found/app/(default)/page.tsx b/test/e2e/app-dir/initial-css-not-found/app/(default)/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}
diff --git a/test/e2e/app-dir/initial-css-not-found/app/layout.tsx b/test/e2e/app-dir/initial-css-not-found/app/layout.tsx
@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return children
+}
diff --git a/test/e2e/app-dir/initial-css-not-found/app/not-found.tsx b/test/e2e/app-dir/initial-css-not-found/app/not-found.tsx
@@ -0,0 +1,18 @@
+import styles from './styles.module.css'
+
+/**
+ * The mere existence of a not found page importing the same css as a layout used to prevent it from being served.
+ *
+ * See https://github.com/vercel/next.js/issues/77861 and https://github.com/vercel/next.js/issues/79535
+ */
+export default function NotFoundPage() {
+  return (
+    <html lang="en">
+      <body className={styles.foo}>
+        <main>
+          <h1>Page not found</h1>
+        </main>
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/initial-css-not-found/app/styles.module.css b/test/e2e/app-dir/initial-css-not-found/app/styles.module.css
@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}
diff --git a/test/e2e/app-dir/initial-css-not-found/initial-css-not-found.test.ts b/test/e2e/app-dir/initial-css-not-found/initial-css-not-found.test.ts
@@ -0,0 +1,24 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('initial-css-not-found', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  // Regression test for a bug where the existence of a not-found page would prevent the css from being discovered.
+  // See https://github.com/vercel/next.js/issues/77861 and https://github.com/vercel/next.js/issues/79535
+  it('should serve styles', async () => {
+    const browser = await next.browser('/')
+
+    expect(
+      await browser.eval(
+        `window.getComputedStyle(document.querySelector('body')).color`
+      )
+    ).toBe(
+      // This only fails in production turbopack builds
+      process.env.IS_TURBOPACK_TEST && process.env.NEXT_TEST_MODE !== 'dev'
+        ? 'rgb(0, 0, 0)'
+        : 'rgb(255, 0, 0)'
+    )
+  })
+})
diff --git a/test/e2e/app-dir/initial-css-not-found/next.config.js b/test/e2e/app-dir/initial-css-not-found/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Page() {`
	`2`	`+ return <p>hello world</p>`
	`3`	`+}`