Adjacent JSX elements ⚛️ React

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

A component returns two sibling JSX elements without a single parent.

Seen on: React

Meaning

JSX compiles to one expression; two siblings need a wrapper element or a Fragment. TypeScript reports it as “JSX expressions must have one parent element”.

Common causes

  • Returning sibling elements
  • Conditional rendering with two elements side by side

⚡ Quick fix

  1. Wrap them in <>…</> (Fragment)
  2. Or a semantic wrapper element if styling needs it

Detailed fix by platform

React

  1. jsx
    return (
  <>
    <Header />
    <Main />
  </>
);

How to diagnose

  1. Return — How many top-level elements?
  2. Recent change — Did it start after a deploy, upgrade, or configuration change? Compare with the last working version.

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.