{"record":{"id":"e28f3dd6b6b38e71","repo":"facebook/react","slug":"attempted-to-call-the-default-export-of-url-fro","errorCode":null,"errorMessage":"Attempted to call the default export of ${url} from the server but it's 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 the default export of (.+?) from the server but it's 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":595,"sourceCode":"  const body = program.body;\n\n  const names: Array<string> = [];\n\n  await parseExportNamesInto(body, names, url, loader);\n\n  if (names.length === 0) {\n    return '';\n  }\n\n  let newSrc =\n    'import {registerClientReference} from \"react-server-dom-esm/server\";\\n';\n  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        ');';","sourceCodeStart":577,"sourceCodeEnd":613,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js#L577-L613","documentation":"When the RSC ESM server loader rewrites a client-reference module, it replaces the default export with registerClientReference(function () { throw ... }). The generated guard fires when server code attempts to call the default export of a module that lives on the client: client code can only run in the browser, so on the server it may only be rendered as a component or passed as a prop to another client component.","triggerScenarios":"In server code: `import submit from './actions.js'` where './actions.js' is in a 'use client' scope, then invoking submit(...) — e.g. calling a client-side handler, formatter, or validator directly during RSC render or from a server module.","commonSituations":"Shared utility modules marked 'use client' whose default export gets invoked during server rendering; porting client-router or browser-API code into a server component; a helper accidentally placed inside a client boundary file.","solutions":["Don't call it: render it as a component (<Comp />) or pass it as a prop to a client component","Move the shared function into a neutral module (no 'use client' directive) that both server and client import","If the call really is a server-side operation, mark the module 'use server' instead of 'use client'"],"exampleFix":"// before (ServerComponent.jsx)\nimport format from './format.js'; // './format.js' has 'use client'\nconst text = format(row); // throws\n\n// after\nimport Format from './Format.js'; // client component\nreturn <Format data={row} />; // render or pass as prop","handlingStrategy":"type-guard","validationCode":"const isClientReference = (v: any) =>\n  v != null && v.$$typeof === Symbol.for('react.client.reference');\n// before calling an imported function on the server:\nif (isClientReference(fn)) {\n  throw new Error('fn is a client reference; render it or pass it as a prop');\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  result = fn(input);\n} catch (e) {\n  if (e instanceof Error && /Attempted to call the default export of .+ from the server/.test(e.message)) {\n    // restructure: render the export as a component or move it to a shared module\n  } else throw e;\n}","preventionTips":["Keep 'use client' modules component-only; put callable utilities in directive-free shared modules","Never invoke functions imported from a client boundary during server render","Add an import boundary lint rule (e.g. eslint-plugin-import boundaries) between server and client folders"],"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"}