{"record":{"id":"9b0888d926e0a34f","repo":"facebook/react","slug":"attempted-to-call-the-default-export-of-moduleid","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-turbopack/src/ReactFlightTurbopackReferences.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-turbopack/src/ReactFlightTurbopackReferences.js#L223-L259","documentation":"When server code checks __esModule interop on a client module proxy, the trap registers target.default as a client reference that throws when invoked: the default export's implementation lives on the client and cannot be called from the server; it can only be rendered as a component or forwarded.","triggerScenarios":"CJS-style interop followed by a call: `const mod = require('./client-module'); mod.default(...)`, or any explicit `ClientModule.default(...)` invocation from server code.","commonSituations":"Server code consuming a client module through CJS transpilation; mixed ESM/CJS codebases triggering __esModule checks; generic wrappers that call .default of dynamic imports.","solutions":["Render the default export as a component (<ClientDefault />) instead of calling it","Pass the default reference as a prop to a client component","If the server needs callable logic, implement it in a 'use server' function instead"],"exampleFix":"// before (server component)\nimport ClientModule from './chart-client';\nconst el = ClientModule({data}); // Error: cannot call default export\n\n// after\nimport ClientChart from './chart-client';\nreturn <ClientChart data={data} />;","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"const CLIENT_REFERENCE = Symbol.for('react.client.reference');\nfunction isClientReference(value) {\n  return value != null && (typeof value === 'object' || typeof value === 'function') && value.$$typeof === CLIENT_REFERENCE;\n}\nfunction safeDefault(mod) {\n  const def = mod.default;\n  if (isClientReference(def) || typeof def === 'function') {\n    return def; // renderable/forwardable, but never call it on the server\n  }\n  return undefined;\n}","tryCatchPattern":null,"preventionTips":["Treat .default of a client module as a component: render or forward, never call","Put server-callable logic in 'use server' modules","Watch CJS interop paths in isomorphic codebases"],"tags":["react-server-components","turbopack","client-references","interop","default-export"],"backgroundTag":"rsc-client-server-boundary","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}