Ensure codeframe when calling Client Functions from the Server

Author: eps1lon

crates/next-core/src/next_client_reference/ecmascript_client_reference/ecmascript_client_reference_module.rs

@@ -149,11 +149,15 @@ impl EcmascriptClientReferenceModule {
 
         let proxy_source = VirtualSource::new(
             self.server_ident.path().await?.join(
-                // Depending on the original format, we call the file `proxy.mjs` or `proxy.cjs`.
-                // This is because we're placing the virtual module next to the original code, so
-                // its parsing will be affected by `type` fields in package.json --
-                // a bare `proxy.js` may end up being unexpectedly parsed as the wrong format.
-                &format!("proxy.{}", if is_esm { "mjs" } else { "cjs" }),
+                // We choose the extension based on the original file because we're placing the
+                // virtual module next to the original code, so its parsing will be
+                // affected by `type` fields in package.json -- a bare `proxy.js`
+                // may end up being unexpectedly parsed as the wrong format.
+                // The name special cased later to always ignore-list this module.
+                &format!(
+                    "__nextjs-internal-proxy.{}",
+                    if is_esm { "mjs" } else { "cjs" }
+                ),
             )?,
             proxy_module_content,
         );

packages/next/src/build/webpack/config/blocks/base.ts

@@ -9,6 +9,8 @@ import { getRspackCore } from '../../../../shared/lib/get-rspack'
 function shouldIgnorePath(modulePath: string): boolean {
   return (
     modulePath.includes('node_modules') ||
+    modulePath.endsWith('__nextjs-internal-proxy.cjs') ||
+    modulePath.endsWith('__nextjs-internal-proxy.mjs') ||
     // Only relevant for when Next.js is symlinked e.g. in the Next.js monorepo
     modulePath.includes('next/dist')
   )

test/development/app-dir/use-cache-errors/use-cache-errors.test.ts

@@ -2,7 +2,7 @@ import { nextTestSetup } from 'e2e-utils'
 import { assertNoRedbox } from '../../../lib/next-test-utils'
 
 describe('use-cache-errors', () => {
-  const { next } = nextTestSetup({
+  const { isTurbopack, next } = nextTestSetup({
     files: __dirname,
   })
   const isRspack = Boolean(process.env.NEXT_RSPACK)
@@ -33,7 +33,24 @@ describe('use-cache-errors', () => {
          ],
        }
       `)
+    } else if (isTurbopack) {
+      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)",
+         ],
+       }
+      `)
     } else {
+      // TODO(veil): Webpack does sourcemap the client reference module.
+      // codeframe just lucks out due to being able to sourcemap.
       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.",

turbopack/crates/turbopack-core/src/source_map/utils.rs

@@ -19,6 +19,8 @@ pub fn add_default_ignore_list(map: &mut swc_sourcemap::SourceMap) {
         if source.starts_with(concatcp!(SOURCE_URL_PROTOCOL, "///[next]"))
             || source.starts_with(concatcp!(SOURCE_URL_PROTOCOL, "///[turbopack]"))
             || source.contains("/node_modules/")
+            || source.ends_with("__nextjs-internal-proxy.cjs")
+            || source.ends_with("__nextjs-internal-proxy.mjs")
         {
             ignored_ids.insert(source_id);
         }