{"record":{"id":"214c5447d1b26164","repo":"facebook/react","slug":"attempted-to-call-the-default-export-of-moduleid-214c54","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-unbundled/src/ReactFlightUnbundledReferences.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-unbundled/src/ReactFlightUnbundledReferences.js#L223-L259","documentation":"The module-namespace proxy for a 'use client' module answers `__esModule` checks with true, pretending to be an ESM-compat module so interop code takes the `.default` path. It then lazily registers a default export whose function body throws: the default export belongs to the client, so calling it from the server is the standard client-function-on-server violation, just reached through CJS interop (`m.default()` after an `__esModule` check).","triggerScenarios":"Server code does an interop check on a namespace import of a client module and then invokes the result: `import * as m from './widget.client'; if (m.__esModule) { m.default(...); }` — or transpiled CJS `require` interop that does the same.","commonSituations":"Server components compiled to CJS or run through interop helpers (TS `esModuleInterop`, Babel `_interopRequireDefault`) that touch `.default` of a client module; generic factories that branch on __esModule before calling default; loading client modules via require() in server scripts.","solutions":["Import the default export directly (`import Widget from './widget.client'`) and render it, rather than going through namespace/interop access.","Keep CJS interop code away from client modules: import client boundaries only from ESM server components.","If a helper must branch, treat a client reference like the component itself — pass it through, never call it."],"exampleFix":"// before (server, transpiled interop)\nimport * as m from './widget.client';\nconst Widget = m.__esModule ? m.default : m;\nWidget();\n\n// after\nimport Widget from './widget.client';\n// render, don't call: <Widget />","handlingStrategy":"type-guard","validationCode":"// Interop helper that refuses to invoke client references\nfunction unwrapDefault(ns) {\n  const d = ns.__esModule ? ns.default : ns;\n  if (d != null && d.$$typeof === Symbol.for('react.client.reference')) {\n    return d; // pass through - do NOT call\n  }\n  return d;\n}","typeGuard":"const CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');\nexport function isClientReference(value) {\n  return typeof value === 'function' && value.$$typeof === CLIENT_REFERENCE_TAG;\n}","tryCatchPattern":null,"preventionTips":["Use direct default imports instead of __esModule interop for client modules.","Never call `.default` of a client namespace on the server; render it.","Keep client boundaries out of CJS-consumed server code."],"tags":["rsc","react-server-components","client-boundary","interop","esmodule","default-export","unbundled"],"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"}