{"record":{"id":"a84d769551d45e22","repo":"facebook/react","slug":"525-a84d76","errorCode":"525","errorMessage":"A React Element from an older version of React was rendered. This is not supported. It can happen if:\n- Multiple copies of the \"react\" package is used.\n- A library pre-bundled an old copy of \"react\" or \"react/jsx-runtime\".\n- A compiler tries to \"inline\" JSX instead of using the runtime.","messagePattern":"A React Element from an older version of React was rendered\\. This is not supported\\. It can happen if:\n- Multiple copies of the \"react\" package is used\\.\n- A library pre-bundled an old copy of \"react\" or \"react/jsx-runtime\"\\.\n- A compiler tries to \"inline\" JSX instead of using the runtime\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/react-server/src/ReactFlightServer.js","lineNumber":3917,"sourceCode":"              return outlineTask(request, task);\n            } else {\n              // Forward any debug info we have the first time we see it.\n              // We do this after init so that we have received all the debug info\n              // from the server by the time we emit it.\n              forwardDebugInfo(request, task, debugInfo);\n            }\n          }\n        }\n        return renderModelDestructive(\n          request,\n          task,\n          parent,\n          parentPropertyName,\n          resolvedModel,\n        );\n      }\n      case REACT_LEGACY_ELEMENT_TYPE: {\n        throw new Error(\n          'A React Element from an older version of React was rendered. ' +\n            'This is not supported. It can happen if:\\n' +\n            '- Multiple copies of the \"react\" package is used.\\n' +\n            '- A library pre-bundled an old copy of \"react\" or \"react/jsx-runtime\".\\n' +\n            '- A compiler tries to \"inline\" JSX instead of using the runtime.',\n        );\n      }\n    }\n\n    if (isClientReference(value)) {\n      return serializeClientReference(\n        request,\n        parent,\n        parentPropertyName,\n        value as any,\n      );\n    }\n","sourceCodeStart":3899,"sourceCodeEnd":3935,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFlightServer.js#L3899-L3935","documentation":"The model serializer met an element whose $$typeof is REACT_LEGACY_ELEMENT_TYPE — the marker used by React versions older than the modern element type. Modern RSC serialization cannot encode legacy elements, so React throws with the three standard causes: duplicate react packages, a library that pre-bundled an old jsx-runtime, or a compiler that hand-inlines JSX instead of emitting runtime imports.","triggerScenarios":"A dependency ships a bundle that inlined its own old react/jsx-runtime at publish time; two react versions resolve within one server graph; a custom Babel/SWC transform emitting plain createElement-style objects instead of importing the JSX runtime.","commonSituations":"Old component libraries published as prebuilt bundles; monorepos with mixed react versions after a partial upgrade; MDX or custom compilers constructing elements by hand; CDN-compiled code pasted into a project.","solutions":["Run npm ls react / yarn why react and dedupe to exactly one version.","Rebuild or republish the offending library with react and react/jsx-runtime marked external (not bundled).","Configure bundler aliases so every react import resolves to the app's single copy.","If a custom transform inlines JSX, switch it to import from react/jsx-runtime."],"exampleFix":"// before — library bundles its own old jsx-runtime\n\n// after — library build config marks react as external\n// rollup.config.js\nexternal: ['react', 'react/jsx-runtime']","handlingStrategy":"validation","validationCode":"// Detect legacy elements before they reach the RSC serializer.\nconst LEGACY_ELEMENT = Symbol.for('react.element');\nexport function findLegacyElements(node: any, seen = new Set()): string[] {\n  if (node == null || typeof node !== 'object' || seen.has(node)) return [];\n  seen.add(node);\n  if (node.$$typeof === LEGACY_ELEMENT) return [String(node.type)];\n  const out: string[] = [];\n  for (const k in node) out.push(...findLegacyElements(node[k], seen));\n  if (Symbol.iterator in node) for (const c of node) out.push(...findLegacyElements(c, seen));\n  return out;\n}","typeGuard":"export function isLegacyElement(v: unknown): boolean {\n  return typeof v === 'object' && v !== null && (v as any).$$typeof === Symbol.for('react.element');\n}","tryCatchPattern":null,"preventionTips":["Audit dependencies' dist bundles for a bundled react/jsx-runtime copy.","Force a single react version via overrides/resolutions in monorepos.","Treat react as external/peer, never bundled, when publishing libraries."],"tags":["version-mismatch","jsx-runtime","duplicate-packages","bundling","server-components"],"backgroundTag":"react-version-mismatch","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}