{"record":{"id":"c062c80f17b0b8f2","repo":"facebook/react","slug":"attempted-to-call-string-name-from-the-serve-c062c8","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-webpack/src/ReactFlightWebpackReferences.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(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      } 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 = {\n  get: function (\n    target: Function,","sourceCodeStart":282,"sourceCodeEnd":318,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js#L282-L318","documentation":"Each named export of a client module is registered as a client reference whose call body throws (getReference in ReactFlightWebpackReferences.js). Importing, rendering, or forwarding the export is fine; invoking it from the server is impossible because the function code only exists in the browser.","triggerScenarios":"import {helper} from './client' followed by helper() in server code. Passing the export to code that invokes it eagerly: rows.map(clientFn), validators(email), parsers(input, clientCallback).","commonSituations":"Utility functions trapped inside files that grew a 'use client' directive; component libraries marking entire packages 'use client' so every helper becomes a client reference; calling client-side formatters/validators during RSC render.","solutions":["Move the pure function into a directive-free module both sides can import","If it needs browser APIs, keep it client-side and pass it as a prop for a client component to invoke","Use the package's server entry point (e.g. 'some-lib/server') if one exists","If the call was accidental, replace it with rendering the component or forwarding the reference"],"exampleFix":"// before\n// validators.client.js: 'use client'; export function validateEmail(v) {...}\nimport {validateEmail} from './validators.client';\nconst ok = validateEmail(email); // calls client export -> throws\n\n// after\n// validators.js (no directive)\nimport {validateEmail} from './validators';\nconst ok = validateEmail(email);","handlingStrategy":"type-guard","validationCode":"function invoke(fn, ...args) {\n  if (isClientReference(fn)) {\n    throw new Error('Client reference invoked on server — forward it to a client component instead');\n  }\n  return fn(...args);\n}","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\n\nfunction isClientReference(value) {\n  return (\n    value !== null &&\n    (typeof value === 'object' || typeof value === 'function') &&\n    value.$$typeof === CLIENT_REFERENCE_TAG\n  );\n}","tryCatchPattern":"try {\n  result = helper(input);\n} catch (e) {\n  if (String(e.message).includes('is on the client')) {\n    return <ClientComponent helper={helper} input={input} />; // let the client call it\n  }\n  throw e;\n}","preventionTips":["Keep pure helpers in directive-free modules so server code can call them directly","Treat every import from a 'use client' file as a render-or-forward handle, never callable","Check packages for a server entry point before importing helpers into server components"],"tags":["react-server-components","use-client","client-reference","named-export","function-call"],"backgroundTag":"rsc-client-reference-violation","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}