{"record":{"id":"8f517896d201a2d9","repo":"vercel/next.js","slug":"attempted-to-call-export-name-from-the-server","errorCode":null,"errorMessage":"Attempted to call {export_name}() from the server but {export_name} 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.","messagePattern":"Attempted to call (.+?)\\(\\) from the server but (.+?) 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\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"crates/next-core/src/next_client_reference/ecmascript_client_reference/ecmascript_client_reference_module.rs","lineNumber":120,"sourceCode":"                                function() {{ throw new Error({call_err}); }},\n                                {server_module_path},\n                                \"default\",\n                            );\n                        \"#,\n                        call_err = StringifyJs(&format!(\n                            \"Attempted to call the default export of {server_module_path} from \\\n                             the server, but it's on the client. It's not possible to invoke a \\\n                             client function from the server, it can only be rendered as a \\\n                             Component or passed to props of a Client Component.\"\n                        )),\n                        server_module_path = StringifyJs(server_module_path),\n                    )?;\n                } else {\n                    writedoc!(\n                        code,\n                        r#\"\n                            export const {export_name} = registerClientReference(\n                                function() {{ throw new Error({call_err}); }},\n                                {server_module_path},\n                                {export_name_str},\n                            );\n                        \"#,\n                        export_name = export_name,\n                        call_err = StringifyJs(&format!(\n                            \"Attempted to call {export_name}() from the server but {export_name} \\\n                             is on the client. It's not possible to invoke a client function from \\\n                             the server, it can only be rendered as a Component or passed to \\\n                             props of a Client Component.\"\n                        )),\n                        server_module_path = StringifyJs(server_module_path),\n                        export_name_str = StringifyJs(export_name),\n                    )?;\n                }\n            }\n        } else {\n            is_esm = false;","sourceCodeStart":102,"sourceCodeEnd":138,"githubUrl":"https://github.com/vercel/next.js/blob/0ae8c72462952df163f1b1e0726641bc5b40dc93/crates/next-core/src/next_client_reference/ecmascript_client_reference/ecmascript_client_reference_module.rs#L102-L138","documentation":"Same client-reference proxy mechanism as error 45, but for a *named* export of a 'use client' module. The proxy generates `export const <name> = registerClientReference(function() { throw ... }, ...)` for each named export, so invoking a named client function (e.g. a client hook, handler, or util) from server code throws with the export name included. The message tells you exactly which export is on the wrong side of the boundary.","triggerScenarios":"In server code, doing `import { useThing } from './client-mod'` (where client-mod has 'use client') and then calling `useThing()`. Or `import { handle } from './client'; handle(req)`. Any named export of a client module invoked as a function from the server triggers it.","commonSituations":"Calling a client hook (useState/useEffect wrapper) from a Server Component; invoking a client-side event handler imported from a 'use client' barrel; refactoring a util out of a client file and still importing it server-side.","solutions":["Stop calling the named export from server code; either render a client component that uses it internally, or move that function into a server-safe module.","Split the file: keep 'use client' on the component file, and put pure shared logic in a separate server-safe module both can import.","If it must be a client behavior, pass it down via props or use a Server Action for the reverse direction.","Grep server files for `import { ... } from '<client module>'` and remove direct invocations."],"exampleFix":"// before (server)\nimport { handleClick } from './client-utils' // 'use client'\nhandleClick(event) // throws: Attempted to call handleClick()...\n\n// after — invoke inside a client component\n// client-component.tsx ('use client')\nimport { handleClick } from './client-utils'\n<button onClick={handleClick} />","handlingStrategy":"type-guard","validationCode":"// Move shared logic into a server-safe module; import that from both sides.\n// shared.ts (NO 'use client')\nexport function pureUtil(x: number) { return x + 1 }\n// client.tsx ('use client') imports pureUtil for UI only\n// server.tsx imports pureUtil directly — no boundary violation","typeGuard":"function isClientExportCall(serverSrc: string, clientPath: string): boolean {\n  // crude: detect `import { x } from '<client>'` followed by `x(`\n  return new RegExp(`from\\\\s+['\"]${clientPath}['\"][\\\\s\\\\S]*\\\\b\\\\w+\\\\(`).test(serverSrc)\n}","tryCatchPattern":null,"preventionTips":["Split pure logic out of 'use client' files so server code can import it directly.","Never call named exports of a client module from server code.","Use ESLint rule `react-server-components/no-client-exports-call-in-server` if available."],"tags":["rsc","react-server-components","use-client","client-reference","named-export","turbopack"],"analyzedSha":"0ae8c72462952df163f1b1e0726641bc5b40dc93","analyzedAt":"2026-08-06T19:44:29.143Z","schemaVersion":2},"datasetVersion":"2026-08-07T02:17:10.218Z"}