{"record":{"id":"4eca472893e843f3","repo":"facebook/react","slug":"attempted-to-call-the-default-export-of-moduleid-4eca47","errorCode":null,"errorMessage":"Attempted to call the default export of ${moduleId} 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/ReactFlightWebpackReferences.js","lineNumber":241,"sourceCode":"    // React looks for debugInfo on thenables.\n    case '_debugInfo':\n      return undefined;\n    // Avoid this attempting to be serialized.\n    case 'toJSON':\n      return undefined;\n    case Symbol.toPrimitive:\n      // $FlowFixMe[prop-missing]\n      return Object.prototype[Symbol.toPrimitive];\n    case Symbol.toStringTag:\n      // $FlowFixMe[prop-missing]\n      return Object.prototype[Symbol.toStringTag];\n    case '__esModule':\n      // Something is conditionally checking which export to use. We'll pretend to be\n      // an ESM compat module but then we'll check again on the client.\n      const moduleId = target.$$id;\n      target.default = registerClientReferenceImpl(\n        function () {\n          throw new Error(\n            `Attempted to call the default export of ${moduleId} 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        } as any,\n        target.$$id + '#',\n        target.$$async,\n      );\n      return true;\n    case 'then':\n      if (target.then) {\n        // Use a cached value\n        return target.then;\n      }\n      if (!target.$$async) {\n        // If this module is expected to return a Promise (such as an AsyncModule) then\n        // we should resolve that with a client reference that unwraps the Promise on","sourceCodeStart":223,"sourceCodeEnd":259,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js#L223-L259","documentation":"When server code (usually bundler CJS/ESM interop) reads '__esModule' on a client module proxy, React pretends the module is an ESM-compat module and registers a 'default' client reference. Importing and forwarding that reference is fine, but invoking it throws: the default export's function body only exists on the client, so it can never execute during server rendering.","triggerScenarios":"import ClientFn from './client' (or mod.default via interop) followed by ClientFn(args) in server code. Default-exported plain functions or helpers inside 'use client' files called from a server component. Interop wrappers that eagerly invoke .default.","commonSituations":"A 'use client' file whose default export is a helper function instead of a component; barrels re-exporting default functions from client bundles; framework-agnostic packages whose ESM entry is marked 'use client' but exports callable utilities.","solutions":["Move the pure function to a module without the 'use client' directive and import it on the server","If it must stay client-side, pass the default reference as a prop to a client component that calls it there","Default-export a component from the client file and keep helper functions in a shared directive-free module","Check the import path — you may be reaching a client entry point when the package ships a server entry"],"exampleFix":"// before\n// util.client.js: 'use client'; export default function formatBytes(n) {...}\nimport formatBytes from './util.client';\nconst s = formatBytes(2048); // calls client default export -> throws\n\n// after\n// util.js (no directive): export function formatBytes(n) {...}\nimport {formatBytes} from './util';\nconst s = formatBytes(2048);","handlingStrategy":"type-guard","validationCode":"function callIfServerSafe(fn, ...args) {\n  if (isClientReference(fn)) {\n    throw new Error('fn is a client reference — pass it to a client component instead of calling it');\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 = ClientDefault(args);\n} catch (e) {\n  if (String(e.message).includes(\"Attempted to call the default export\")) {\n    // Render it as a component or forward it to a client component instead.\n    return <ClientComponent handler={ClientDefault} />;\n  }\n  throw e;\n}","preventionTips":["Keep plain functions out of files marked 'use client' unless they are components","Audit default imports from client modules — they can be rendered or forwarded, never invoked on the server","Prefer named exports for helpers in shared code so the boundary is explicit"],"tags":["react-server-components","use-client","client-reference","default-export","interop"],"backgroundTag":"rsc-client-reference-violation","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}