{"record":{"id":"f6aaffed4d82c31c","repo":"facebook/react","slug":"attempted-to-call-the-default-export-of-url-fro-f6aaff","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-webpack/src/ReactFlightWebpackNodeLoader.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-webpack/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-webpack/src/ReactFlightWebpackNodeLoader.js#L577-L613","documentation":"When a 'use client' module is loaded on the server through the webpack node loader, its default export is rewritten to registerClientReference(function(){ throw ... }). The embedded throw is the runtime half of the client-reference boundary: a client export can be rendered as a component or passed as a prop, but if server code tries to CALL the default export, this error fires.","triggerScenarios":"Server-side code invokes the default export of a file marked 'use client' — e.g. const init = await import('./client-utils'); init(myArg) — instead of rendering <DefaultExport /> or forwarding it.","commonSituations":"Shared-looking utility modules that got 'use client' added (because they use hooks/state) and are still called from Server Components | Calling a client-side formatter/validator function from the server | Refactors where a component default export is also used as a plain function","solutions":["Move the callable logic into a shared module with no directive, importable by both sides","Keep 'use client' files exporting only components; pass functions as props rather than invoking them","If the function must run on the server, put it in a 'use server' file instead"],"exampleFix":"// before: utils marked 'use client' but called from a Server Component\n// client-utils.js: 'use client'; export default function format(d){...}\nimport format from './client-utils';\nexport default async function Page(){ return <p>{format(date)}</p>; }\n\n// after: shared module without a directive\n// format.js: export function format(d){...}\nimport {format} from './format';\nexport default async function Page(){ return <p>{format(date)}</p>; }","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}\n// server-side usage: render or pass, never call\nif (isClientReference(fn)) return <Comp fn={fn} />;\nreturn fn();","tryCatchPattern":"try { fn(args); } catch (e) {\n  if (/Attempted to call the default export of .* but it's on the client/.test(e.message)) {\n    throw new Error('Called a client default export from the server — move the logic to a shared or \\'use server\\' module: ' + url);\n  }\n  throw e;\n}","preventionTips":["Keep 'use client' files exporting components only; plain functions live in directive-free modules","Use isClientReference to gate any generic call sites on the server","Code-review server code that imports from files known to carry 'use client'"],"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"}