facebook/docusaurus · error · Error

Could not extract APITable row name from JSX tree: ${JSON.st

Error message

Could not extract APITable row name from JSX tree:
${JSON.stringify(node, null, 2)}

What it means

APITable builds stable anchor IDs by deriving each row's name from its first cell. getRowName walks the first-child chain until it reaches a leaf; if that leaf is not a string (e.g., a component, number, or empty node) it throws and dumps the offending JSX tree. The row's leading cell must contain a text leaf.

Source

Thrown at website/src/components/APITable/index.tsx:34

import useBrokenLinks from '@docusaurus/useBrokenLinks';
import {useHistory} from '@docusaurus/router';
import styles from './styles.module.css';

interface Props {
  readonly children: ReactElement<ComponentProps<'table'>>;
  readonly name?: string;
}

// ReactNode equivalent of HTMLElement#innerText
function getRowName(node: ReactElement): string {
  let curNode: ReactNode = node;
  while (isValidElement(curNode)) {
    [curNode] = React.Children.toArray(
      (curNode.props as {children: ReactNode}).children,
    );
  }
  if (typeof curNode !== 'string') {
    throw new Error(
      `Could not extract APITable row name from JSX tree:\n${JSON.stringify(
        node,
        null,
        2,
      )}`,
    );
  }
  return curNode as string;
}

function APITableRow({
  name,
  children,
  ref,
}: {
  name: string | undefined;
  children: ReactElement<ComponentProps<'tr'>>;
  ref: React.Ref<HTMLTableRowElement>;

View on GitHub (pinned to 3f483e80e3)

Solutions

Ensure the first cell's first leaf is a text string (e.g., put the name text before any icon).
Move non-text leading content to a later column so the leading leaf is text.
If you control the data, guarantee the name field is a non-empty string.

Example fix

// before (MDX)
| <Icon name="foo"/> foo | description |
// after
| foo <Icon name="foo"/> | description |

Defensive patterns

Strategy: validation

Validate before calling

function assertRowHasTextName(rowChildren: React.ReactNode) {
  let cur: React.ReactNode = rowChildren;
  while (React.isValidElement(cur)) {
    [cur] = React.Children.toArray((cur.props as {children: React.ReactNode}).children);
  }
  if (typeof cur !== 'string' || cur.trim() === '') {
    throw new Error('APITable row first cell must lead with a text name');
  }
}

Type guard

const rowLeadsWithString = (
  rowChildren: React.ReactNode,
): boolean => {
  let cur: React.ReactNode = rowChildren;
  while (React.isValidElement(cur)) {
    [cur] = React.Children.toArray((cur.props as {children: React.ReactNode}).children);
  }
  return typeof cur === 'string' && cur.trim() !== '';
};

Prevention

Start each APITable row's name cell with a text leaf, not a component.
Move icons/badges after the leading text in that cell.
For data-driven tables, ensure the name column is a non-empty string.

When it happens

Trigger: A table row whose first <td> begins with a React component (an icon, badge, custom MDX component) instead of text; an empty leading cell; a cell containing only an emoji/image with no text.

Common situations: MDX API tables that put an icon or component in the name column; refactoring rows to start with a Type component; cells generated from data where the name field is empty.

Related errors

AI-assisted analysis of facebook/docusaurus@3f483e80e3 (2026-08-12). Data as JSON: /api/errors/5389253b4a832e1d. Report an issue: GitHub.