{"record":{"id":"36a226068f2d017a","repo":"facebook/react","slug":"299","errorCode":"299","errorMessage":"Target container is not a DOM element.","messagePattern":"Target container is not a DOM element\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-dom/src/client/ReactDOMClientFB.js","lineNumber":82,"sourceCode":"    // $FlowFixMe[prop-missing] Flow incorrectly thinks Set has no prototype\n    Set.prototype == null ||\n    typeof Set.prototype.clear !== 'function' ||\n    typeof Set.prototype.forEach !== 'function'\n  ) {\n    console.error(\n      'React depends on Map and Set built-in types. Make sure that you load a ' +\n        'polyfill in older browsers. https://react.dev/link/react-polyfills',\n    );\n  }\n}\n\nfunction createPortal(\n  children: ReactNodeList,\n  container: Element | DocumentFragment,\n  key: ?string = null,\n): React$Portal {\n  if (!isValidContainer(container)) {\n    throw new Error('Target container is not a DOM element.');\n  }\n\n  // TODO: pass ReactDOM portal implementation as third argument\n  // $FlowFixMe[incompatible-type] The Flow type is opaque but there's no way to actually create it.\n  return createPortalImpl(children, container, null, key);\n}\n\n// Overload the definition to the two valid signatures.\n// Warning, this opts-out of checking the function body.\ndeclare function flushSyncFromReconciler<R>(fn: () => R): R;\ndeclare function flushSyncFromReconciler(): void;\nfunction flushSyncFromReconciler<R>(fn: (() => R) | void): R | void {\n  if (__DEV__) {\n    if (isAlreadyRendering()) {\n      console.error(\n        'flushSync was called from inside a lifecycle method. React cannot ' +\n          'flush when React is already rendering. Consider moving this call to ' +\n          'a scheduler task or micro task.',","sourceCodeStart":64,"sourceCodeEnd":100,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-dom/src/client/ReactDOMClientFB.js#L64-L100","documentation":"createPortal validates its container with isValidContainer, which accepts only DOM nodes whose nodeType is ELEMENT (1), DOCUMENT (9), or DOCUMENT_FRAGMENT (11) (plus a special mount-point comment). Passing null/undefined — classically a failed document.getElementById — or a non-DOM value such as a selector string or a jQuery-wrapped object throws error 299 before any portal is created.","triggerScenarios":"createPortal(<Modal />, document.getElementById('modal-root')) when no element with that id exists; passing a CSS selector string, a jQuery/$() result, or a plain object instead of a DOM node.","commonSituations":"The portal container element is rendered later than the script runs; the id in the JSX/HTML does not match the id in JS; the container div was never added to the page template.","solutions":["Null-check the getElementById result before rendering the portal","Ensure the container <div id=\"...\"> exists in the DOM before the code runs (script at end of body, or defer)","Fix mismatched or typo'd container ids between HTML and JavaScript","Render the portal only after the container is mounted (e.g. inside useEffect)"],"exampleFix":"// before\ncreatePortal(<Tooltip />, document.getElementById('tooltip-root'));\n\n// after\nconst host = document.getElementById('tooltip-root');\nif (host) {\n  createPortal(<Tooltip />, host);\n}","handlingStrategy":"type-guard","validationCode":"function isValidPortalContainer(node: unknown): boolean {\n  return !!(\n    node &&\n    typeof node === 'object' &&\n    (node.nodeType === 1 /* ELEMENT */ ||\n      node.nodeType === 9 /* DOCUMENT */ ||\n      node.nodeType === 11 /* DOCUMENT_FRAGMENT */)\n  );\n}\n\nconst host = document.getElementById('tooltip-root');\nif (isValidPortalContainer(host)) {\n  createPortal(<Tooltip />, host);\n}","typeGuard":"function isValidPortalContainer(node: unknown): node is Element | Document | DocumentFragment {\n  return !!(\n    node &&\n    typeof node === 'object' &&\n    (node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11)\n  );\n}","tryCatchPattern":"try {\n  createPortal(children, host);\n} catch (e) {\n  if (e instanceof Error && e.message === 'Target container is not a DOM element.') {\n    throw new Error(`Portal host missing: ${host}`); // clearer context for debugging\n  }\n  throw e;\n}","preventionTips":["Always null-check getElementById results before using them as portal containers","Create portals inside useEffect or lifecycle code that runs after the host element exists","Keep container ids in a shared constant so HTML and JS cannot drift apart"],"tags":["react-dom","portals","dom","null-container","getelementbyid"],"backgroundTag":"invalid-dom-container","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}