{"record":{"id":"ba94d2392722d5f7","repo":"facebook/react","slug":"attempted-to-call-name-from-the-server-but-ba94d2","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-webpack/src/ReactFlightWebpackNodeLoader.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-webpack/src/ReactFlightWebpackNodeLoader.js#L589-L625","documentation":"Same boundary as the default-export case, but for named exports: the webpack node loader rewrites every named export of a 'use client' module to registerClientReference(function(){ throw ... }, url, name). The throw executes only if server code calls that named export — rendering it as a component or passing it as a prop stays legal, calling it from the server does not.","triggerScenarios":"Server code calls a named export of a 'use client' file: import {save} from './actions-client'; save(data). The proxy function throws with the export name and module URL embedded.","commonSituations":"Helper/hook files given 'use client' for internal state but still consumed as functions by the server tree | Passing a function reference into a client prop (fine) but then a second server path invokes it (throws) | Migrating components to RSC without sorting which exports are components vs plain functions","solutions":["Split the file: plain functions into a directive-free shared module, components stay in 'use client'","Make the server-side equivalent a 'use server' action if it must execute on the server","Pass the client function as a prop to a Client Component instead of invoking it from server code"],"exampleFix":"// before\n// client-helpers.js: 'use client';\nexport function track(event){ window.analytics(event); }\n// server component:\nimport {track} from './client-helpers';\ntrack('pageview'); // throws\n\n// after\n// analytics.js (no directive, isomorphic):\nexport function track(event){ if (typeof window !== 'undefined') window.analytics(event); }\nimport {track} from './analytics';","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"const CLIENT_REFERENCE = Symbol.for('react.client.reference');\nfunction isClientReference(value) {\n  return value != null && value.$$typeof === CLIENT_REFERENCE;\n}\nif (isClientReference(save)) passAsProp(save); else save(data);","tryCatchPattern":"try { save(payload); } catch (e) {\n  if (/Attempted to call \\w+\\(\\) from the server but \\w+ is on the client/.test(e.message)) {\n    throw new Error(`${name} lives in a 'use client' module; move it to a shared module or make it a 'use server' action.`);\n  }\n  throw e;\n}","preventionTips":["Split utilities out of 'use client' files","Name server-callable helpers in 'use server' modules explicitly","Run isClientReference checks in generic dispatchers on the server"],"tags":["react-server-components","use-client","client-reference","server-boundary"],"backgroundTag":"client-function-called-from-server","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}