{"record":{"id":"e8d79dfc5b9bed9c","repo":"facebook/docusaurus","slug":"the-docusaurus-translate-component-only-accept-s","errorCode":null,"errorMessage":"The Docusaurus <Translate> component only accept simple string values","messagePattern":"The Docusaurus <Translate> component only accept simple string values","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus/src/client/exports/Translate.tsx","lineNumber":51,"sourceCode":"export function translate<Str extends string>(\n  {message, id}: TranslateParam<Str>,\n  values?: InterpolateValues<Str, string | number>,\n): string {\n  const localizedMessage = getLocalizedMessage({message, id});\n  return interpolate(localizedMessage, values);\n}\n\n// Maybe we'll want to improve this component with additional features\n// Like toggling a translation mode that adds a little translation button near\n// the text?\nexport default function Translate<Str extends string>({\n  children,\n  id,\n  values,\n}: TranslateProps<Str>): ReactNode {\n  if (children && typeof children !== 'string') {\n    console.warn('Illegal <Translate> children', children);\n    throw new Error(\n      'The Docusaurus <Translate> component only accept simple string values',\n    );\n  }\n\n  const localizedMessage: string = getLocalizedMessage({message: children, id});\n  return <>{interpolate(localizedMessage, values)}</>;\n}\n","sourceCodeStart":33,"sourceCodeEnd":59,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus/src/client/exports/Translate.tsx#L33-L59","documentation":"<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.","triggerScenarios":"Render <Translate id=\"x\"><Icon/> Welcome</Translate> (element children); pass a number/array as children; nest a <strong> inside <Translate>.","commonSituations":"Trying to translate rich/JSX content; refactoring a string into Translate and forgetting to flatten JSX; mixing Translate with Interpolate incorrectly.","solutions":["Use a plain string: <Translate>Welcome</Translate>.","For placeholders use values: <Translate values={{n}}>{\"{n} results\"}</Translate>.","For embedded JSX, split the string into multiple <Translate> nodes surrounding the element, or use <Interpolate> with JSX values."],"exampleFix":"// before\n<Translate id=\"welcome\">\n  Welcome, <b>{name}</b>\n</Translate>\n// after\n<Translate id=\"welcome\" values={{name}}>\n  {\"Welcome, {name}\"}\n</Translate>","handlingStrategy":"type-guard","validationCode":"function assertTranslateChildren(children: unknown) {\n  if (children && typeof children !== 'string') {\n    throw new Error('<Translate> children must be a string');\n  }\n}","typeGuard":"const isTranslateString = (c: unknown): c is string =>\n  typeof c === 'string';","tryCatchPattern":null,"preventionTips":["Only pass plain-string children to <Translate>; embed values via the values prop.","For JSX inside translated text, split into multiple <Translate> nodes or use <Interpolate>.","Type your wrappers to require children: string."],"tags":["i18n","translate","react","props-validation"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}