first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/test/development/app-dir/use-cache-errors/app/anonymous/page.tsx
+++ b/test/development/app-dir/use-cache-errors/app/anonymous/page.tsx
@@ -0,0 +1,12 @@
+function createCacheFn() {
+  return async () => {
+    'use cache'
+    throw new Error('kaputt!')
+  }
+}
+
+const cached = createCacheFn()
+
+export default async function Page() {
+  return <p>A page with an anonymous cache function. {await cached()}</p>
+}
--- a/test/development/app-dir/use-cache-errors/app/client-module.ts
+++ b/test/development/app-dir/use-cache-errors/app/client-module.ts
@@ -0,0 +1,5 @@
+'use client'
+
+export function useStuff() {
+  return 'stuff'
+}
--- a/test/development/app-dir/use-cache-errors/app/layout.tsx
+++ b/test/development/app-dir/use-cache-errors/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
--- a/test/development/app-dir/use-cache-errors/app/module-with-use-cache.ts
+++ b/test/development/app-dir/use-cache-errors/app/module-with-use-cache.ts
@@ -0,0 +1,17 @@
+'use cache'
+
+// This file simulates adding a "use cache" directive to a client module that's
+// mistaken as a server module. It does not have itself a "use client"
+// directive, but is imported by a client module with a "use client" directive,
+// while also importing another client module with a "use client" directive.
+// Adding the "use cache" directive here, effectively forces the module to be a
+// server module, which then results in an error when trying to call the client
+// function.
+
+import { useStuff } from './client-module'
+
+export async function useCachedStuff() {
+  // Intentional misusage (using hooks in async functions).
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useStuff()
+}
--- a/test/development/app-dir/use-cache-errors/app/page.tsx
+++ b/test/development/app-dir/use-cache-errors/app/page.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import { useActionState } from 'react'
+import { useCachedStuff } from './module-with-use-cache'
+
+function OtherClientComponent({
+  getCachedStuff,
+}: {
+  getCachedStuff: () => Promise<string>
+}) {
+  const [result, formAction] = useActionState(getCachedStuff, null)
+
+  return (
+    <form action={formAction}>
+      <button id="action-button">Submit</button>
+      <p>{result}</p>
+    </form>
+  )
+}
+
+export default function Page() {
+  return <OtherClientComponent getCachedStuff={useCachedStuff} />
+}
--- a/test/development/app-dir/use-cache-errors/next.config.js
+++ b/test/development/app-dir/use-cache-errors/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    useCache: true,
+  },
+}
+
+module.exports = nextConfig
--- a/test/development/app-dir/use-cache-errors/use-cache-errors.test.ts
+++ b/test/development/app-dir/use-cache-errors/use-cache-errors.test.ts
@@ -0,0 +1,120 @@
+import { nextTestSetup } from 'e2e-utils'
+import { waitForNoRedbox } from '../../../lib/next-test-utils'
+
+const cacheComponentsEnabled = process.env.__NEXT_CACHE_COMPONENTS === 'true'
+
+describe('use-cache-errors', () => {
+  const { next, isRspack, isTurbopack } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should not show a false-positive compiler error about a misplaced "use cache" directive', async () => {
+    // This is a regression test to ensure that an injected React Refresh
+    // statement (`var _s = __turbopack_context__.k.signature`) does not
+    // interfere with our "use cache" directive misplacement detection.
+    const browser = await next.browser('/')
+    await waitForNoRedbox(browser)
+  })
+
+  it('should show a runtime error when calling the incorrectly used cache function', async () => {
+    const browser = await next.browser('/')
+    await browser.elementById('action-button').click()
+    if (isRspack) {
+      // TODO: the source is missing and the stack leaks rspack internals
+      await expect(browser).toDisplayRedbox(`
+       {
+         "description": "Attempted to call useStuff() from the server but useStuff is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
+         "environmentLabel": "Cache",
+         "label": "Runtime Error",
+         "source": null,
+         "stack": [
+           "<FIXME-file-protocol>",
+           "useCachedStuff about:/Cache/webpack-internal:///(action-browser)/app/module-with-use-cache.ts (25:68)",
+           "Page ./app/page.tsx",
+         ],
+       }
+      `)
+    } else {
+      await expect(browser).toDisplayRedbox(`
+       {
+         "description": "Attempted to call useStuff() from the server but useStuff is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.",
+         "environmentLabel": "Cache",
+         "label": "Runtime Error",
+         "source": "app/module-with-use-cache.ts (16:18) @ useCachedStuff
+       > 16 |   return useStuff()
+            |                  ^",
+         "stack": [
+           "useCachedStuff app/module-with-use-cache.ts (16:18)",
+           "Page app/page.tsx (22:10)",
+         ],
+       }
+      `)
+    }
+  })
+
+  it('should not leak generated internal cache function names in call stacks', async () => {
+    const browser = await next.browser('/anonymous')
+
+    if (cacheComponentsEnabled) {
+      if (isTurbopack) {
+        await expect(browser).toDisplayRedbox(`
+         {
+           "description": "kaputt!",
+           "environmentLabel": "Prerender",
+           "label": "Runtime Error",
+           "source": "app/anonymous/page.tsx (4:11) @ <anonymous>
+         > 4 |     throw new Error('kaputt!')
+             |           ^",
+           "stack": [
+             "<anonymous> app/anonymous/page.tsx (4:11)",
+           ],
+         }
+        `)
+      } else {
+        await expect(browser).toDisplayRedbox(`
+         {
+           "description": "kaputt!",
+           "environmentLabel": "Prerender",
+           "label": "Runtime Error",
+           "source": "app/anonymous/page.tsx (4:11) @ eval
+         > 4 |     throw new Error('kaputt!')
+             |           ^",
+           "stack": [
+             "eval app/anonymous/page.tsx (4:11)",
+           ],
+         }
+        `)
+      }
+    } else {
+      if (isTurbopack) {
+        await expect(browser).toDisplayRedbox(`
+         {
+           "description": "kaputt!",
+           "environmentLabel": "Cache",
+           "label": "Runtime Error",
+           "source": "app/anonymous/page.tsx (4:11) @ <anonymous>
+         > 4 |     throw new Error('kaputt!')
+             |           ^",
+           "stack": [
+             "<anonymous> app/anonymous/page.tsx (4:11)",
+           ],
+         }
+        `)
+      } else {
+        await expect(browser).toDisplayRedbox(`
+         {
+           "description": "kaputt!",
+           "environmentLabel": "Cache",
+           "label": "Runtime Error",
+           "source": "app/anonymous/page.tsx (4:11) @ eval
+         > 4 |     throw new Error('kaputt!')
+             |           ^",
+           "stack": [
+             "eval app/anonymous/page.tsx (4:11)",
+           ],
+         }
+        `)
+      }
+    }
+  })
+})