{"record":{"id":"75a39cd4b35faa9c","repo":"facebook/react","slug":"the-module-modulepath-is-marked-as-an-async-e","errorCode":null,"errorMessage":"The module \"${modulePath}\" is marked as an async ESM module but was loaded as a CJS proxy. This is probably a bug in the React Server Components bundler.","messagePattern":"The module \"(.+?)\" is marked as an async ESM module but was loaded as a CJS proxy\\. This is probably a bug in the React Server Components bundler\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js","lineNumber":75,"sourceCode":"    // which contains this name as well.\n    // TODO: It's unfortunate that we now have to parse this string. We should\n    // probably go back to encoding path and name separately on the client reference.\n    const idx = modulePath.lastIndexOf('#');\n    if (idx !== -1) {\n      name = modulePath.slice(idx + 1);\n      resolvedModuleData = config[modulePath.slice(0, idx)];\n    }\n    if (!resolvedModuleData) {\n      throw new Error(\n        'Could not find the module \"' +\n          modulePath +\n          '\" in the React Client Manifest. ' +\n          'This is probably a bug in the React Server Components bundler.',\n      );\n    }\n  }\n  if (resolvedModuleData.async === true && clientReference.$$async === true) {\n    throw new Error(\n      'The module \"' +\n        modulePath +\n        '\" is marked as an async ESM module but was loaded as a CJS proxy. ' +\n        'This is probably a bug in the React Server Components bundler.',\n    );\n  }\n  if (resolvedModuleData.async === true || clientReference.$$async === true) {\n    return [resolvedModuleData.id, resolvedModuleData.chunks, name, 1];\n  } else {\n    return [resolvedModuleData.id, resolvedModuleData.chunks, name];\n  }\n}\n\nexport function getServerReferenceId<T>(\n  config: ClientManifest,\n  serverReference: ServerReference<T>,\n): ServerReferenceId {\n  return serverReference.$$id;","sourceCodeStart":57,"sourceCodeEnd":93,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server-dom-turbopack/src/server/ReactFlightServerConfigTurbopackBundler.js#L57-L93","documentation":"After resolving a client reference's manifest entry, the Turbopack server config cross-checks the module's async flag against the reference's $$async flag. Both being true means the manifest records the module as an async ESM module while the reference was created through the synchronous CJS-proxy path, which would make the client double-unwrap the module. React throws instead of emitting a payload the client cannot load correctly, and flags it as a React Server Components bundler bug.","triggerScenarios":"resolveClientReferenceMetadata is called with a clientReference where clientReference.$$async === true and the manifest entry resolvedModuleData.async === true, i.e. an async ESM module reached the server through a require()/CJS interop path that also marked the reference async.","commonSituations":"A 'use client' module that is also an async ESM module (top-level await, await import cycles) required via CJS interop in the server graph; Turbopack/Next.js canary regressions in async-module tracking; mixed import styles (import vs require) of the same client module in one build.","solutions":["Clear turbopack build caches and rebuild so async-module metadata is regenerated consistently.","Import the client module the same way everywhere in the server graph (prefer static `import` over require/interop) so only one reference path is created.","Align your framework/Turbopack version with the react-server-dom-turbopack build you depend on.","If it persists on a clean build, minimize the repro (async ESM 'use client' module required through CJS) and report it to the React/Turbopack repository."],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"try {\n  renderToPipeableStream(<App />, {})(res);\n} catch (e) {\n  if (/marked as an async ESM module but was loaded as a CJS proxy/.test(String(e.message))) {\n    // bundler metadata inconsistency: rebuild from clean caches\n    console.error('RSC bundler async-module mismatch - clear caches and rebuild');\n  }\n  throw e;\n}","preventionTips":["Import each client module with a single style (prefer static import) across the whole server graph.","Avoid top-level-await modules that are also client boundaries when possible.","Keep react-server-dom-turbopack and the framework that generates the manifest on aligned versions."],"tags":["rsc","react-server-components","turbopack","esm","cjs","async-modules","bundler"],"backgroundTag":"rsc-async-esm-cjs-mismatch","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}