{"record":{"id":"52ae8aa37056d4df","repo":"facebook/react","slug":"the-module-modulepath-is-marked-as-an-async-e-52ae8a","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-unbundled/src/server/ReactFlightServerConfigUnbundledBundler.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-unbundled/src/server/ReactFlightServerConfigUnbundledBundler.js#L57-L93","documentation":"After resolving a client module in the manifest, the server checks consistency: if the manifest marks the module async (resolvedModuleData.async === true, meaning its chunks must be awaited as ESM) AND the client reference was also created as async ($$async), but the module was actually obtained through the CommonJS require/register proxy path, it throws. The async boundary would be silently lost through the CJS proxy, breaking chunk loading on the client, so this is treated as a bundler-integration bug.","triggerScenarios":"Using the CJS register() hook (ReactFlightWebpackNodeRegister) to load a 'use client' module whose manifest entry was emitted as async ESM; mixing import and require graphs so the server holds a CJS proxy of a module the manifest declares async; hand-creating client references with $$async true over a require()d module.","commonSituations":"Switching part of a server to ESM while the register hook still compiles client modules as CJS; version skew between the plugin that emitted the manifest and the loader/register used at runtime; custom servers that require() client modules for type checks but register them as references.","solutions":["Load 'use client' modules through the ESM loader pipeline (ReactFlightWebpackNodeLoader in module.rules / node --experimental-loader) instead of the CJS register hook","Regenerate the client manifest with the same toolchain version you run with, so 'async' flags match how modules are actually loaded","If you create client references manually, do not set $$async for modules you load via require()"],"exampleFix":"// before: CJS register hook serving async-marked modules\nrequire('react-server-dom-webpack/node-register');\nconst ClientChart = require('./Chart'); // manifest says async ESM -> throws\n\n// after: run the module graph through the ESM loader\n// webpack server config / node loader chain:\nmodule: {rules: [{test: /\\.(js|ts|jsx|tsx)$/,\n  loader: 'react-server-dom-webpack/node-loader'}]}","handlingStrategy":"validation","validationCode":"// Detect the mismatch before render: async manifest entries must not be required\nconst isCjsProxy = (mod) => mod != null && (mod.__esModule !== true || typeof mod.default === 'undefined' && mod.constructor?.name === 'Module' === false);\nfor (const [path, entry] of Object.entries(clientManifest)) {\n  if (entry.async && usedRequireFor(path)) {\n    throw new Error(`${path} is async ESM in the manifest but was loaded via require()`);\n  }\n}","typeGuard":"function isAsyncManifestEntry(entry) {\n  return entry != null && entry.async === true;\n}","tryCatchPattern":null,"preventionTips":["Pick one module system for the server graph: ESM loader pipeline or CJS register, never both","Regenerate manifests whenever you switch loader vs register","Do not hand-set $$async on manually registered client references"],"tags":["react-server-components","esm","cjs","webpack","manifest"],"backgroundTag":"esm-cjs-module-mismatch","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}