facebook/docusaurus · error · Error

Bad usage of APITable component. It is probably that your Ma

Error message

Bad usage of APITable component.
It is probably that your Markdown table is malformed.
Make sure to double-check you have the appropriate number of columns for each table row.

What it means

<APITable> expects exactly one child that is an MDX-rendered <table> element. The component checks children.type !== 'table' and throws up front because it then destructures thead/tbody from the table's children. A non-table child (a wrapper div, a pre block, or anything produced by a malformed markdown table) fails this guard.

Source

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

      }}
      onKeyDown={(e: React.KeyboardEvent) => {
        if (e.key === 'Enter') {
          history.push(anchor);
        }
      }}>
      {children.props.children}
    </tr>
  );
}

/*
 * Note: this is not a quite robust component since it makes a lot of
 * assumptions about how the children looks; however, those assumptions
 * should be generally correct in the MDX context.
 */
export default function APITable({children, name}: Props): ReactNode {
  if (children.type !== 'table') {
    throw new Error(
      'Bad usage of APITable component.\nIt is probably that your Markdown table is malformed.\nMake sure to double-check you have the appropriate number of columns for each table row.',
    );
  }
  const [thead, tbody] = React.Children.toArray(children.props.children) as [
    ReactElement<{children: ReactElement[]}>,
    ReactElement<{children: ReactElement[]}>,
  ];
  const highlightedRow = useRef<HTMLTableRowElement>(null);
  useEffect(() => {
    highlightedRow.current?.focus();
  }, [highlightedRow]);
  const rows = React.Children.map(
    // @ts-expect-error: TODO fix typing
    tbody.props.children,
    (row: ReactElement<ComponentProps<'tr'>>) => (
      <APITableRow name={name} ref={highlightedRow}>
        {row}
      </APITableRow>

View on GitHub (pinned to 3f483e80e3)

Solutions

Fix the markdown table so MDX emits a real <table> (verify the separator row and equal column counts).
Make the table the direct, sole child of <APITable> (no wrapping div/fragment).
If you must wrap, wrap outside APITable, not between APITable and the table.

Example fix

// before (malformed / wrapped)
<APITable>
  <div>
    | col |
    | --- |
    | a |
  </div>
</APITable>
// after
<APITable>
  | col |
  | --- |
  | a |
</APITable>

Defensive patterns

Strategy: validation

Validate before calling

function assertAPITableChild(children: React.ReactNode) {
  if (!React.isValidElement(children) || children.type !== 'table') {
    throw new Error(
      '<APITable> requires a single <table> child (rendered from a markdown table)',
    );
  }
}

Type guard

const isTableElement = (
  c: React.ReactNode,
): c is React.ReactElement<React.ComponentProps<'table'>> =>
  React.isValidElement(c) && c.type === 'table';

Prevention

Always feed APITable a directly-rendered markdown table as its only child.
Double-check the `|---|---|` separator row and equal column counts in the markdown.
Never wrap the table in a div or fragment between APITable and the table.

When it happens

Trigger: Wrap the markdown table in a <div> or another element before APITable; write malformed markdown (missing header separators, uneven column counts) so MDX does not emit a table element; pass a code fence or paragraph as the child.

Common situations: Markdown table syntax errors (missing the `|---|---|` separator row, mismatched column counts); wrapping APITable around content that is not a table; JSX-in-MDX inserting an element between APITable and the table.

Understand the failure class

Parsing and encoding errors: unexpected token, malformed input — why parsers reject input and how to find the real culprit.

Related errors

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