# Error: Target container is not a DOM element. When using createPortal, the second argument must be a valid DOM node.

- **ID:** `react/portal-target-not-dom-element`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 88%

## Root Cause

The second argument passed to ReactDOM.createPortal is not a valid DOM element (e.g., null, undefined, or a string selector), often because the target element hasn't been rendered yet or the selector is incorrect.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 16.0.0 | active | — | — |
| React 17.0.2 | active | — | — |
| React 18.2.0 | active | — | — |

## Workarounds

1. **Ensure the target DOM element exists before calling createPortal by using a ref or checking if the element is available in useEffect.** (88% success)
   ```
   Ensure the target DOM element exists before calling createPortal by using a ref or checking if the element is available in useEffect.
   ```
2. **Define the target element in the HTML file (e.g., index.html) and ensure it's present before the React app mounts.** (95% success)
   ```
   Define the target element in the HTML file (e.g., index.html) and ensure it's present before the React app mounts.
   ```

## Dead Ends

- **Using document.querySelector('#root') without checking if the element exists** — If the DOM element is not yet mounted (e.g., in a component that renders before the target), querySelector returns null. (70% fail)
- **Passing a string like '#modal-root' directly to createPortal** — createPortal expects a DOM element, not a CSS selector string. It will throw an error because a string is not a node. (90% fail)
- **Using document.getElementById inside a component that runs before the target is rendered** — If the target div is defined in the same component's JSX, it may not exist in the DOM when the portal is created, leading to null. (60% fail)