{"record":{"id":"04beb24659214032","repo":"facebook/react","slug":"attempted-to-call-the-default-export-of-url-fro-04beb2","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-unbundled/src/ReactFlightUnbundledNodeLoader.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-unbundled/src/ReactFlightUnbundledNodeLoader.js#L577-L613","documentation":"When the unbundled Node loader loads a 'use client' module inside the server, it replaces the default export with a registered client reference whose function body throws. Client code executes only in the browser; if server code calls the default export, the wrapper throws this error explaining the only legal uses: render it as a Component or pass it as a prop to another Client Component.","triggerScenarios":"A server component (or any server-module code) imports the default export of a 'use client' module and invokes it as a function: `import Button from './Button.client'; Button()` or `formatDate(now)` where formatDate is the default export of a client module.","commonSituations":"Utility functions (formatters, date libs) accidentally left in a file with 'use client' and then called from a server component; invoking a client component as a function instead of rendering <Button/>; hooks re-exported from a 'use client' file called on the server.","solutions":["Render it instead of calling it: use <ClientComponent {...props}/> in JSX.","If the function is pure and needed on the server, move it into a shared module WITHOUT the 'use client' directive and import that from both sides.","If the call must happen in the browser, move the call into a client component and pass only data/props across the boundary."],"exampleFix":"// before (server component)\nimport formatDate from './lib/format.client';\nexport default async function Page() {\n  return <span>{formatDate(Date.now())}</span>;\n}\n\n// after: shared module without 'use client'\n// lib/format.js  (no directive)\nexport default function formatDate(ts) { /* ... */ }\nimport formatDate from './lib/format';","handlingStrategy":"type-guard","validationCode":"// Before calling an imported function on the server\nimport { isClientReference } from './guards';\nif (isClientReference(fn)) {\n  throw new Error('fn is a client reference - render it or pass it as a prop');\n}","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\nexport function isClientReference(value) {\n  return (\n    typeof value === 'function' &&\n    value !== null &&\n    value.$$typeof === CLIENT_REFERENCE_TAG\n  );\n}","tryCatchPattern":null,"preventionTips":["Keep pure utilities in directive-free shared modules so the server can call them.","Never invoke imported client functions in server components; render components and pass props.","In generic factories, run isClientReference() before invoking user-supplied callbacks."],"tags":["rsc","react-server-components","client-boundary","server-components","unbundled","node-loader"],"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"}