{"record":{"id":"ae9fcc3786d18fca","repo":"facebook/react","slug":"the-module-modulepath-is-marked-as-an-async-e-ae9fcc","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":"critical","filePath":"packages/react-server-dom-webpack/src/server/ReactFlightServerConfigWebpackBundler.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-webpack/src/server/ReactFlightServerConfigWebpackBundler.js#L57-L93","documentation":"resolveClientReference throws when the client manifest marks the module as async ESM (resolvedModuleData.async === true) and the reference itself is flagged $$async, yet the reference was loaded through the CommonJS module-proxy path. The bundler produced contradictory metadata — the client would load the module with the wrong semantics — so React refuses to serialize it and reports a bundler bug.","triggerScenarios":"A 'use client' module using top-level await / async ESM output while the RSC integration wraps it with createClientModuleProxy (CJS semantics); mixing ESM ('type': 'module') client output with CJS interop in one setup; a react-server-dom-webpack runtime at a different version than the webpack RSC loader plugin, changing the proxy strategy.","commonSituations":"Upgrading the RSC plugin or react-server-dom-webpack separately without a clean rebuild; enabling top-level await in client components mid-project; custom bundler integrations reusing React's plugin with inconsistent module formats.","solutions":["Pin matching versions of react, react-server-dom-webpack, and the RSC bundler plugin, then clean-rebuild everything","Avoid top-level await in 'use client' modules, or make the client build emit ESM consistently so the async path matches","In custom integrations, do not register async modules through createClientModuleProxy — keep $$async flags consistent with the manifest"],"exampleFix":null,"handlingStrategy":"retry","validationCode":null,"typeGuard":null,"tryCatchPattern":"try {\n  const {pipe} = renderToPipeableStream(<App/>, {onError: e => log(e)});\n} catch (e) {\n  if (String(e.message).includes('async ESM module but was loaded as a CJS proxy')) {\n    // Bundler metadata conflict: align plugin/runtime versions and clean-rebuild, then retry once.\n  }\n}","preventionTips":["Upgrade react, react-server-dom-webpack, and the RSC bundler plugin together as a set","Avoid top-level await in 'use client' modules unless the whole client build is ESM","Never mix CJS proxy registration (createClientModuleProxy) with async-marked manifest entries in custom integrations"],"tags":["react-server-components","bundler-manifest","esm","cjs","async-modules","webpack"],"backgroundTag":"rsc-manifest-mismatch","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}