{
  "id": "react/portal-container-not-mounted",
  "signature": "Error: The portal container is not a valid DOM element. Make sure the container element exists before calling createPortal.",
  "signature_zh": "错误：Portal 容器不是有效的 DOM 元素。请确保在调用 createPortal 之前容器元素已存在。",
  "regex": "portal container is not a valid DOM element",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "ReactDOM.createPortal is called with a container that is null or undefined, usually because the target DOM element hasn't been mounted yet (e.g., document.getElementById('portal-root') returns null).",
  "root_cause_type": "generic",
  "root_cause_zh": "ReactDOM.createPortal 被调用时传递了一个 null 或 undefined 的容器，通常是因为目标 DOM 元素尚未挂载（例如 document.getElementById('portal-root') 返回 null）。",
  "versions": [
    {
      "version": "React 16.0+",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "Refs are null during initial render; the container must exist in the DOM before createPortal runs.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "The element is not attached to the DOM, so it's not a valid container for a portal.",
      "fail_rate": 0.85,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Timers are unreliable and may still run before the DOM is ready; also causes race conditions.",
      "fail_rate": 0.75,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Ensure the container element exists in the HTML before the React app mounts. Example: <div id=\"portal-root\"></div> in index.html, then use const portalRoot = document.getElementById('portal-root'); ReactDOM.createPortal(children, portalRoot);",
      "success_rate": 0.95,
      "how": "Ensure the container element exists in the HTML before the React app mounts. Example: <div id=\"portal-root\"></div> in index.html, then use const portalRoot = document.getElementById('portal-root'); ReactDOM.createPortal(children, portalRoot);",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use useEffect to create the portal after the component mounts: useEffect(() => { setContainer(document.getElementById('portal-root')); }, []); Then conditionally render the portal only when container is not null.",
      "success_rate": 0.9,
      "how": "Use useEffect to create the portal after the component mounts: useEffect(() => { setContainer(document.getElementById('portal-root')); }, []); Then conditionally render the portal only when container is not null.",
      "condition": "",
      "sources": []
    },
    {
      "action": "For dynamic containers, create the container element in useEffect and append it to document.body: useEffect(() => { const el = document.createElement('div'); document.body.appendChild(el); setContainer(el); return () => document.body.removeChild(el); }, []);",
      "success_rate": 0.88,
      "how": "For dynamic containers, create the container element in useEffect and append it to document.body: useEffect(() => { const el = document.createElement('div'); document.body.appendChild(el); setContainer(el); return () => document.body.removeChild(el); }, []);",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Ensure the container element exists in the HTML before the React app mounts. Example: <div id=\"portal-root\"></div> in index.html, then use const portalRoot = document.getElementById('portal-root'); ReactDOM.createPortal(children, portalRoot);",
    "Use useEffect to create the portal after the component mounts: useEffect(() => { setContainer(document.getElementById('portal-root')); }, []); Then conditionally render the portal only when container is not null.",
    "For dynamic containers, create the container element in useEffect and append it to document.body: useEffect(() => { const el = document.createElement('div'); document.body.appendChild(el); setContainer(el); return () => document.body.removeChild(el); }, []);"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/portals.html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.87,
  "fix_success_rate": 0.92,
  "resolvable": "true",
  "first_seen": "2023-04-12",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}