{"record":{"id":"6044335d62adad33","repo":"facebook/react","slug":"attempted-to-call-name-from-the-server-but","errorCode":null,"errorMessage":"Attempted to call ${name}() from the server but ${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":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js","lineNumber":607,"sourceCode":"  for (let i = 0; i < names.length; i++) {\n    const name = names[i];\n    if (name === 'default') {\n      newSrc += 'export default ';\n      newSrc += 'registerClientReference(function() {';\n      newSrc +=\n        'throw new Error(' +\n        JSON.stringify(\n          `Attempted to call the default export of ${url} from the server ` +\n            `but it's 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 props of a ` +\n            `Client Component.`,\n        ) +\n        ');';\n    } else {\n      newSrc += 'export const ' + name + ' = ';\n      newSrc += 'registerClientReference(function() {';\n      newSrc +=\n        'throw new Error(' +\n        JSON.stringify(\n          `Attempted to call ${name}() from the server but ${name} is on the client. ` +\n            `It's not possible to invoke a client function from the server, it can ` +\n            `only be rendered as a Component or passed to props of a Client Component.`,\n        ) +\n        ');';\n    }\n    newSrc += '},';\n    newSrc += JSON.stringify(url) + ',';\n    newSrc += JSON.stringify(name) + ');\\n';\n  }\n\n  // TODO: Generate source maps for Client Reference functions so they can point to their\n  // original locations.\n  return newSrc;\n}\n\nasync function loadClientImport(","sourceCodeStart":589,"sourceCodeEnd":625,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js#L589-L625","documentation":"The named-export twin of the default-export guard: while rewriting a client-reference module, the RSC ESM server loader wraps each named export in registerClientReference(function () { throw ... }). Calling any named export of a client module from server code fires this message at the call site, since client functions can only execute in the browser — server code may render them as components or pass them as props.","triggerScenarios":"Server code doing `import {validate} from './client-lib.js'` (module under 'use client') followed by validate(input); helper/validation functions exported from a client boundary file and invoked during RSC rendering or inside a server action module.","commonSituations":"Barrel files in client boundaries exporting both components and utility functions that server code tries to reuse; incremental RSC migrations where a previously shared util got a 'use client' directive; copy-pasting client logic into server components.","solutions":["Move the called function out of the 'use client' module into a shared server-safe module","Keep it on the client but don't invoke it server-side: render the exporting component or pass the function as a prop","If the function must run server-side, create a 'use server' action and call that instead"],"exampleFix":"// before\nimport {validate} from './form-utils.js'; // 'use client' module\nif (!validate(user)) return null; // throws\n\n// after\nimport {validate} from '../shared/validation.js'; // no directive\nif (!validate(user)) return null;","handlingStrategy":"type-guard","validationCode":"const isClientReference = (v: any) =>\n  v != null && v.$$typeof === Symbol.for('react.client.reference');\nif (isClientReference(validate)) {\n  // don't call: move validate to a shared module or render/pass instead\n}","typeGuard":"function isClientReference(value: unknown): boolean {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    (value as any).$$typeof === Symbol.for('react.client.reference')\n  );\n}","tryCatchPattern":"try {\n  const ok = validate(input);\n} catch (e) {\n  if (e instanceof Error && /^Attempted to call \\S+\\(\\) from the server/.test(e.message)) {\n    // client function invoked on server: relocate it to a shared module\n  } else throw e;\n}","preventionTips":["Don't export plain utility functions from 'use client' barrel files","Audit server components for direct calls to imports originating in client boundaries","Use lint boundaries so server code can only import server-safe utility modules"],"tags":["react-server-components","client-references","use-client","server-components"],"backgroundTag":"rsc-client-function-invoked-on-server","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}