{"record":{"id":"d38bbbabb92d2a44","repo":"facebook/react","slug":"attempted-to-call-string-name-from-the-serve-d38bbb","errorCode":null,"errorMessage":"Attempted to call ${String(name)}() from the server but ${String(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-unbundled/src/ReactFlightUnbundledReferences.js","lineNumber":300,"sourceCode":"        return then;\n      } else {\n        // Since typeof .then === 'function' is a feature test we'd continue recursing\n        // indefinitely if we return a function. Instead, we return an object reference\n        // if we check further.\n        return undefined;\n      }\n  }\n  if (typeof name === 'symbol') {\n    throw new Error(\n      'Cannot read Symbol exports. Only named exports are supported on a client module ' +\n        'imported on the server.',\n    );\n  }\n  let cachedReference = target[name];\n  if (!cachedReference) {\n    const reference: ClientReference<any> = registerClientReferenceImpl(\n      function () {\n        throw new Error(\n          // eslint-disable-next-line react-internal/safe-string-coercion\n          `Attempted to call ${String(name)}() from the server but ${String(\n            name,\n          )} 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      } as any,\n      target.$$id + '#' + name,\n      target.$$async,\n    );\n    Object.defineProperty(reference as any, 'name', {value: name});\n    cachedReference = target[name] = new Proxy(reference, deepProxyHandlers);\n  }\n  return cachedReference;\n}\n\nconst proxyHandlers = {","sourceCodeStart":282,"sourceCodeEnd":318,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-unbundled/src/ReactFlightUnbundledReferences.js#L282-L318","documentation":"This is the core client-boundary guard of the unbundled runtime: every named export of a 'use client' module imported on the server is a registered client reference wrapping a function that throws when invoked. The message spells out the only legal uses of a client function from server code — render it as a Component or pass it as a prop to a Client Component.","triggerScenarios":"In a server component: `import { formatMoney } from './format.client'; formatMoney(5)` — any call of a named export of a 'use client' module, including passing it to non-React server code that invokes callbacks.","commonSituations":"Calling utility functions exported from files that later gained a 'use client' directive (e.g. because they import hooks); passing client functions into server-side helpers that immediately invoke them; re-exporting pure helpers from a client barrel and calling them on the server.","solutions":["Move the function into a shared module without 'use client' and import it on both sides.","If the call must run in the browser, move it into a client component and pass results as props.","If it is a component, render it in JSX instead of calling it."],"exampleFix":"// before (server component)\nimport { formatMoney } from './money.client';\n<span>{formatMoney(total)}</span>\n\n// after: money.js has no 'use client' directive\nimport { formatMoney } from './lib/money';\n<span>{formatMoney(total)}</span>","handlingStrategy":"type-guard","validationCode":"// Guard every indirect call of imported functions\nif (isClientReference(fn)) {\n  return <FnComponent {...props} />; // render, don't invoke\n}\nreturn fn(props);","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\nexport function isClientReference(value) {\n  return typeof value === 'function' && value.$$typeof === CLIENT_REFERENCE_TAG;\n}","tryCatchPattern":null,"preventionTips":["Only call functions imported from directive-free modules in server components.","Move helpers out of a file before adding 'use client' to it.","In plugin/registry code, branch on isClientReference() before invoking callbacks."],"tags":["rsc","react-server-components","client-boundary","server-components","unbundled","proxy"],"backgroundTag":"rsc-client-function-called-from-server","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}