first commit

test/e2e/app-dir/cache-components-segment-configs/cache-components-edge-deduplication.test.ts

@@ -0,0 +1,90 @@
+import { nextTestSetup } from 'e2e-utils'
+
+import { waitForRedbox } from 'next-test-utils'
+
+// Filter CLI output to only keep Turbopack error header lines (starting with ⨯ or
+// standalone file:line:col) to accurately count error occurrences without counting
+// console.error, stack traces, or forwarded browser logs.
+function filterToErrorHeaders(output: string): string {
+  return output
+    .split('\n')
+    .filter(
+      (line) =>
+        !line.includes('[browser]') &&
+        !line.includes('console.error') &&
+        !line.includes('at <unknown>') &&
+        !line.includes('at Object.') &&
+        !line.includes('at DevServer.') &&
+        !line.includes('at DevBundlerService.') &&
+        !line.includes('at async ')
+    )
+    .join('\n')
+}
+
+// Only Turbopack runs the transform on the layout once in edge and non-edge contexts
+// so we only test this on Turbopack
+;(process.env.IS_TURBOPACK_TEST ? describe : describe.skip)(
+  'cache-components-edge-deduplication',
+  () => {
+    const { next, skipped, isNextDev } = nextTestSetup({
+      files: __dirname + '/fixtures/edge-deduplication',
+      skipStart: true,
+      skipDeployment: true,
+    })
+
+    if (skipped) {
+      return
+    }
+
+    it('should not duplicate errors when layout is compiled for both edge and non-edge contexts', async () => {
+      try {
+        await next.start()
+      } catch {
+        // we expect the build to fail
+      }
+
+      if (isNextDev) {
+        const browser = await next.browser('/edge-with-layout/edge')
+        waitForRedbox(browser)
+        await expect(browser).toDisplayRedbox(`
+         {
+           "description": "Route segment config "dynamic" is not compatible with \`nextConfig.cacheComponents\`. Please remove it.",
+           "environmentLabel": null,
+           "label": "Build Error",
+           "source": "./app/edge-with-layout/layout.tsx (1:14)
+         Route segment config "dynamic" is not compatible with \`nextConfig.cacheComponents\`. Please remove it.
+         > 1 | export const dynamic = 'force-dynamic'
+             |              ^^^^^^^",
+           "stack": [],
+         }
+        `)
+
+        // Count occurrences of the layout error at the specific location
+        // Filter out browser logs to avoid counting forwarded browser errors
+        const filteredOutput = filterToErrorHeaders(next.cliOutput)
+        const layoutErrorMatches = filteredOutput.match(
+          /\.\/app\/edge-with-layout\/layout\.tsx:1:14/g
+        )
+        // We don't show an error stack, just the individual error messages at each location
+        expect(layoutErrorMatches.length).toBe(1)
+      } else {
+        // Check that both the layout and edge page errors appear
+        expect(next.cliOutput).toContain('./app/edge-with-layout/layout.tsx')
+        expect(next.cliOutput).toContain('./app/edge-with-layout/edge/page.tsx')
+        expect(next.cliOutput).toContain(
+          '"dynamic" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+        )
+        expect(next.cliOutput).toContain(
+          '"runtime" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+        )
+        // Count occurrences of the layout error at the specific location
+        const layoutErrorMatches = next.cliOutput.match(
+          /\.\/app\/layout\.tsx:1:14/g
+        )
+
+        // Should appear exactly twice: once in the formatted error message, once in the stack trace
+        expect(layoutErrorMatches.length).toBe(2)
+      }
+    })
+  }
+)

test/e2e/app-dir/cache-components-segment-configs/cache-components-segment-configs.test.ts

@@ -0,0 +1,147 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  retry,
+  waitForRedbox,
+  getRedboxDescription,
+  getRedboxSource,
+} from 'next-test-utils'
+
+describe('cache-components-segment-configs', () => {
+  const { next, skipped, isNextDev, isTurbopack } = nextTestSetup({
+    files: __dirname + '/fixtures/default',
+    skipStart: true,
+    skipDeployment: true,
+  })
+
+  if (skipped) {
+    return
+  }
+
+  it("it should error when using segment configs that aren't supported by cacheComponents", async () => {
+    try {
+      await next.start()
+    } catch {
+      // we expect the build to fail
+    }
+
+    if (isNextDev) {
+      const browser = await next.browser('/revalidate')
+      await waitForRedbox(browser)
+      const redbox = {
+        description: await getRedboxDescription(browser),
+        source: await getRedboxSource(browser),
+      }
+
+      if (isTurbopack) {
+        expect(redbox.description).toMatchInlineSnapshot(
+          `"Route segment config "revalidate" is not compatible with \`nextConfig.cacheComponents\`. Please remove it."`
+        )
+      } else {
+        expect(redbox.description).toMatchInlineSnapshot(
+          `"  x Route segment config "revalidate" is not compatible with \`nextConfig.cacheComponents\`. Please remove it."`
+        )
+      }
+      expect(redbox.source).toContain(
+        '"revalidate" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+      )
+    } else {
+      expect(next.cliOutput).toContain('./app/dynamic-params/[slug]/page.tsx')
+      expect(next.cliOutput).toContain(
+        '"dynamicParams" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+      )
+      expect(next.cliOutput).toContain('./app/dynamic/nested/page.tsx')
+      expect(next.cliOutput).toContain('./app/dynamic/page.tsx')
+      expect(next.cliOutput).toContain(
+        '"dynamic" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+      )
+
+      expect(next.cliOutput).toContain('./app/fetch-cache/page.tsx')
+      expect(next.cliOutput).toContain(
+        '"fetchCache" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+      )
+
+      expect(next.cliOutput).toContain('./app/revalidate/page.tsx')
+      expect(next.cliOutput).toContain(
+        '"revalidate" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+      )
+    }
+  })
+
+  it('should propagate configurations from layouts to pages', async () => {
+    // patch the root layout. We expect the "dynamic" segment config to now be part of
+    // each sub-page that uses this layout.
+    await next.patchFile(
+      'app/layout.tsx',
+      (content) => {
+        return `
+          export const runtime = 'nodejs';
+          ${content}
+        `
+      },
+      async () => {
+        try {
+          await next.start()
+        } catch {
+          // we expect the build to fail
+        }
+
+        if (isNextDev) {
+          const browser = await next.browser('/revalidate')
+          await waitForRedbox(browser)
+          const redbox = {
+            description: await getRedboxDescription(browser),
+            source: await getRedboxSource(browser),
+          }
+
+          if (isTurbopack) {
+            // The page-level error is shown first in the redbox, but
+            // the layout error is also present in the CLI output.
+            expect(redbox.description).toMatchInlineSnapshot(
+              `"Route segment config "revalidate" is not compatible with \`nextConfig.cacheComponents\`. Please remove it."`
+            )
+          } else {
+            expect(redbox.description).toMatchInlineSnapshot(
+              `"  x Route segment config "runtime" is not compatible with \`nextConfig.cacheComponents\`. Please remove it."`
+            )
+          }
+          expect(redbox.source).toContain(
+            'is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+          )
+          // Verify that the "runtime" error from the layout propagation
+          // is present in the CLI output even if it's not the first error
+          // shown in the redbox.
+          expect(next.cliOutput).toContain(
+            '"runtime" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+          )
+        } else {
+          await retry(async () => {
+            expect(next.cliOutput).toContain(
+              '"runtime" is not compatible with `nextConfig.cacheComponents`. Please remove it.'
+            )
+
+            // the stack trace is different between turbopack/webpack
+            if (isTurbopack) {
+              expectLinesToAppearTogether(next.cliOutput, [
+                './app/layout.tsx:2:24',
+              ])
+            } else {
+              expectLinesToAppearTogether(next.cliOutput, [
+                'Import trace for requested module:',
+                './app/fetch-cache/page.tsx',
+                './app/layout.tsx',
+              ])
+            }
+          })
+        }
+      }
+    )
+  })
+})
+
+function expectLinesToAppearTogether(output: string, lines: string[]) {
+  const escapedLines = lines.map((line) =>
+    line.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  )
+  const pattern = new RegExp(escapedLines.join('\\s*'), 's')
+  expect(output).toMatch(pattern)
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/dynamic-params/[slug]/page.tsx

@@ -0,0 +1,12 @@
+// Return a list of `params` to populate the [slug] dynamic segment
+export async function generateStaticParams() {
+  return [{ slug: 'foo' }, { slug: 'bar' }, { slug: 'baz' }]
+}
+
+export default async function Page(props) {
+  const params = await props.params
+  const { slug } = params
+  return <div>Hello from {slug}</div>
+}
+
+export const dynamicParams = false

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/dynamic/nested/page.tsx

@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return <div>This page uses `export const dynamic`.</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/dynamic/page.tsx

@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return <div>This page uses `export const dynamic`.</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/fetch-cache/page.tsx

@@ -0,0 +1,5 @@
+export const fetchCache = 'force-no-store'
+
+export default function Page() {
+  return <div>This page uses `export const fetchCache`.</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/layout.tsx

@@ -0,0 +1,9 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/multiple/page.tsx

@@ -0,0 +1,12 @@
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+export const fetchCache = 'force-no-store'
+
+export default function Page() {
+  return (
+    <div>
+      This page uses `export const runtime`, `export const dynamic`, and `export
+      const fetchCache`.
+    </div>
+  )
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Hello World</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/revalidate/page.tsx

@@ -0,0 +1,5 @@
+export const revalidate = 1
+
+export default function Page() {
+  return <div>This page uses `export const revalidate`.</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/app/runtime/page.tsx

@@ -0,0 +1,5 @@
+export const runtime = 'edge'
+
+export default function Page() {
+  return <div>This page uses `export const runtime`.</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/default/next.config.js

@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  cacheComponents: true,
+}
+
+module.exports = nextConfig

test/e2e/app-dir/cache-components-segment-configs/fixtures/edge-deduplication/app/edge-with-layout/edge/page.tsx

@@ -0,0 +1,5 @@
+export const runtime = 'edge'
+
+export default function Page() {
+  return <div>Test page under app/</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/edge-deduplication/app/edge-with-layout/layout.tsx

@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <div>{children}</div>
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/edge-deduplication/app/layout.tsx

@@ -0,0 +1,11 @@
+export const dynamic = 'force-dynamic'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/cache-components-segment-configs/fixtures/edge-deduplication/app/page.tsx

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

test/e2e/app-dir/cache-components-segment-configs/fixtures/edge-deduplication/next.config.js

@@ -0,0 +1,8 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  cacheComponents: true,
+}
+
+module.exports = nextConfig