What causes "The ` ` tag may only be rendered once." in facebook/react?

Keep only in the root layout and render everything else as fragments or regular elements

facebook/react · error · Error

The `<body>` tag may only be rendered once.

Error message

The `<body>` tag may only be rendered once.

What it means

Thrown by pushStartBody when a second document-level <body> begins rendering (preamble.bodyChunks already populated and insertionMode < HTML_MODE). HTML permits exactly one body element; the first <body> claims the preamble slot and any later one aborts the render.

Source

Thrown at packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js:3774

    // This <head> is deep and is likely just an error. we emit it inline though.
    // Validation should warn that this tag is the the wrong spot.
    return pushStartGenericElement(target, props, 'head', formatContext);
  }
}

function pushStartBody(
  target: Array<Chunk | PrecomputedChunk>,
  props: Object,
  renderState: RenderState,
  preambleState: null | PreambleState,
  formatContext: FormatContext,
): ReactNodeList {
  if (formatContext.insertionMode < HTML_MODE) {
    // This <body> is the Document.body
    const preamble = preambleState || renderState.preamble;

    if (preamble.bodyChunks) {
      throw new Error(`The ${'`<body>`'} tag may only be rendered once.`);
    }

    // Insert a marker in the body where the contribution to the body tag was in case we need to clear it.
    if (preambleState !== null) {
      target.push(bodyPreambleContributionChunk);
    }

    preamble.bodyChunks = [];
    return pushStartSingletonElement(
      preamble.bodyChunks,
      props,
      'body',
      formatContext,
    );
  } else {
    // This <head> is deep and is likely just an error. we emit it inline though.
    // Validation should warn that this tag is the the wrong spot.
    return pushStartGenericElement(target, props, 'body', formatContext);

View on GitHub (pinned to eafeac097b)

Solutions

Keep <body> only in the root layout and render everything else as fragments or regular elements
Convert pasted full-page components: strip their <html>/<head>/<body> wrappers down to the inner content
Grep the render output/tree for '<body' to find the duplicate source

Example fix

// before: page.jsx renders its own document
<body><h1>Hi</h1></body>

// after: layout owns the body; page renders content only
<> <h1>Hi</h1> </>

Defensive patterns

Strategy: validation

Prevention

Keep exactly one <body>, defined in the root layout
Strip full-document wrappers from pasted page components
Add a lint rule (e.g. react/forbid-elements or custom) banning <body>/<html> outside a designated layout file

When it happens

Trigger: A tree containing two <body> elements at document level — e.g. <html><head/><body>...</body></html> in the layout plus another <body> rendered by a page, a portal target markup string, or an imported legacy component.

Common situations: Merging an existing full HTML page component into an app that already provides <html>/<body>; copy-pasting standalone page templates (with their own <body>) into framework layouts; third-party widgets shipping full-document markup.

Related errors

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/6dded0c0f17adb64. Report an issue: GitHub.