facebook/docusaurus · error · Error

The Docusaurus <Interpolate> component only accept simple st

Error message

The Docusaurus <Interpolate> component only accept simple string values. Received: ${isValidElement(children) ? 'React element' : typeof children}

What it means

<Interpolate> is a minimal string-templating component: its children must be a plain string containing {placeholder} markers, and values supplies the replacements. If children is not a string (a React element, number, etc.) it throws and reports the received type. To embed JSX, put the element into the values map and reference it by placeholder, not as children.

Source

Thrown at packages/docusaurus/src/client/exports/Interpolate.tsx:63

    }
    return seg;
  });
  if (segments.some((seg) => isValidElement(seg))) {
    return segments
      .map((seg, index) =>
        isValidElement(seg) ? React.cloneElement(seg, {key: index}) : seg,
      )
      .filter((seg) => seg !== '');
  }
  return segments.join('');
}

export default function Interpolate<Str extends string>({
  children,
  values,
}: InterpolateProps<Str>): ReactNode {
  if (typeof children !== 'string') {
    throw new Error(
      `The Docusaurus <Interpolate> component only accept simple string values. Received: ${
        isValidElement(children) ? 'React element' : typeof children
      }`,
    );
  }
  return <>{interpolate(children, values)}</>;
}

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Keep children as a string template: <Interpolate values={{name}}>Hello, {"{name}"}</Interpolate>.
2. Move JSX into the values object: values={{icon: <Icon/>}} and reference {icon} inside the string.
3. If you need full rich-text translation, split into multiple <Translate> strings around the JSX.

Example fix

// before
<Interpolate values={{name}}>
  Hello, <b>{name}</b>
</Interpolate>
// after
<Interpolate values={{name}}>
  {"Hello, {name}"}
</Interpolate>

function assertInterpolateChildren(children: unknown) {
  if (typeof children !== 'string') {
    throw new Error(
      '<Interpolate> children must be a string template',
    );
  }
}

const isInterpolatableString = (c: unknown): c is string =>
  typeof c === 'string';

When it happens

Trigger: Render <Interpolate values={{icon:<Icon/>}}>{<Icon/>} Hello</Interpolate>; pass a number or boolean as children; nest another component as children.

Common situations: Confusing Interpolate with a generic JSX wrapper; trying to translate rich content; refactoring a Translate/Interpolate call and dropping the template string.

Related errors

• The Docusaurus <Translate> component only accept simple stri
• Docusaurus error: The <Tabs> has a defaultValue "${defaultVa
• Docusaurus translation declarations must have at least a tra
• Error while attempting to extract Docusaurus translations fr
• Multiple docs sidebar items produce the same translation key

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