facebook/docusaurus · error · Error

The Docusaurus <Translate> component only accept simple stri

Error message

The Docusaurus <Translate> component only accept simple string values

What it means

<Translate> requires its children to be a plain string used as the default message; it logs 'Illegal <Translate> children' and throws when children is truthy and not a string. The string flows into getLocalizedMessage (the same path translate() uses). Pass string children and use values for any interpolation or embedded JSX.

Source

Thrown at packages/docusaurus/src/client/exports/Translate.tsx:51

export function translate<Str extends string>(
  {message, id}: TranslateParam<Str>,
  values?: InterpolateValues<Str, string | number>,
): string {
  const localizedMessage = getLocalizedMessage({message, id});
  return interpolate(localizedMessage, values);
}

// Maybe we'll want to improve this component with additional features
// Like toggling a translation mode that adds a little translation button near
// the text?
export default function Translate<Str extends string>({
  children,
  id,
  values,
}: TranslateProps<Str>): ReactNode {
  if (children && typeof children !== 'string') {
    console.warn('Illegal <Translate> children', children);
    throw new Error(
      'The Docusaurus <Translate> component only accept simple string values',
    );
  }

  const localizedMessage: string = getLocalizedMessage({message: children, id});
  return <>{interpolate(localizedMessage, values)}</>;
}

View on GitHub (pinned to 3f483e80e3)

Solutions

1. Use a plain string: <Translate>Welcome</Translate>.
2. For placeholders use values: <Translate values={{n}}>{"{n} results"}</Translate>.
3. For embedded JSX, split the string into multiple <Translate> nodes surrounding the element, or use <Interpolate> with JSX values.

Example fix

// before
<Translate id="welcome">
  Welcome, <b>{name}</b>
</Translate>
// after
<Translate id="welcome" values={{name}}>
  {"Welcome, {name}"}
</Translate>

function assertTranslateChildren(children: unknown) {
  if (children && typeof children !== 'string') {
    throw new Error('<Translate> children must be a string');
  }
}

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

When it happens

Trigger: Render <Translate id="x"><Icon/> Welcome</Translate> (element children); pass a number/array as children; nest a <strong> inside <Translate>.

Common situations: Trying to translate rich/JSX content; refactoring a string into Translate and forgetting to flatten JSX; mixing Translate with Interpolate incorrectly.

Related errors

• The Docusaurus <Interpolate> component only accept simple st
• Docusaurus translation declarations must have at least a tra
• Docusaurus error: The <Tabs> has a defaultValue "${defaultVa
• 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/e8d79dfc5b9bed9c. Report an issue: GitHub.