{"record":{"id":"1982004ee5bcc77c","repo":"chakra-ui/chakra-ui","slug":"the-children-prop-of-highlight-must-be-a-string","errorCode":null,"errorMessage":"The children prop of Highlight must be a string","messagePattern":"The children prop of Highlight must be a string","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/components/highlight/highlight.tsx","lineNumber":26,"sourceCode":"\nexport interface HighlightProps {\n  query: string | string[]\n  children: string | ((props: HighlightChunk[]) => React.ReactNode)\n  styles?: SystemStyleObject | undefined\n  ignoreCase?: boolean | undefined\n  matchAll?: boolean | undefined\n}\n\n/**\n * `Highlight` allows you to highlight substrings of a text.\n *\n * @see Docs https://chakra-ui.com/docs/components/highlight\n */\nexport function Highlight(props: HighlightProps): JSX.Element {\n  const { children, query, ignoreCase, matchAll, styles } = props\n\n  if (typeof children !== \"string\") {\n    throw new Error(\"The children prop of Highlight must be a string\")\n  }\n\n  const chunks = useHighlight({\n    query,\n    text: children,\n    matchAll,\n    ignoreCase,\n  })\n\n  return (\n    <For each={chunks}>\n      {(chunk, index) => {\n        return chunk.match ? (\n          <Mark key={index} css={styles}>\n            {chunk.text}\n          </Mark>\n        ) : (\n          <Fragment key={index}>{chunk.text}</Fragment>","sourceCodeStart":8,"sourceCodeEnd":44,"githubUrl":"https://github.com/chakra-ui/chakra-ui/blob/13692aee261402d0f4fd6eeab3a3857afcaae67b/packages/react/src/components/highlight/highlight.tsx#L8-L44","documentation":"Highlight is documented to accept children as either a plain string or a render-prop function (see HighlightProps.children type), but the runtime implementation throws whenever children is not a string. The function form is therefore typed but unsupported; any non-string children — number, element, array, or the advertised render-prop — will throw.","triggerScenarios":"Passing <Highlight query='x'>{() => <em/>}</Highlight> (the typed render-prop form), a number child, an array of nodes, or JSX. Any of these fails the typeof children !== 'string' check.","commonSituations":"Trying to use the render-prop signature the types advertise; passing interpolated values like {count}; rendering Highlight around JSX; migrating from v2 where the API may have differed.","solutions":["Pass a plain string as children: <Highlight query='x'>some text</Highlight>.","If you need custom rendering of matched chunks, use the lower-level useHighlight hook from @ark-ui/react/highlight directly.","Coerce non-strings: wrap numbers/booleans with String(...) before passing.","Track upstream — the render-prop type is likely a docs/types defect; file an issue if you need it."],"exampleFix":"// before\n<Highlight query=\"chakra\">{count}</Highlight>\n// after\n<Highlight query=\"chakra\">{String(count)}</Highlight>","handlingStrategy":"type-guard","validationCode":"function renderHighlight(children: unknown, query: string) {\n  if (typeof children !== 'string') {\n    if (typeof children === 'number' || typeof children === 'boolean') {\n      children = String(children)\n    } else {\n      throw new TypeError('Highlight children must be a string (or coercible primitive).')\n    }\n  }\n  return <Highlight query={query}>{children as string}</Highlight>\n}","typeGuard":"const isHighlightText = (c: unknown): c is string => typeof c === 'string'","tryCatchPattern":"try {\n  return <Highlight query={q}>{children}</Highlight>\n} catch (e) {\n  if (String(e) === 'The children prop of Highlight must be a string') {\n    return <Highlight query={q}>{String(children)}</Highlight>\n  }\n  throw e\n}","preventionTips":["Always pass a string child to Highlight.","Coerce numbers/booleans with String(...) before rendering.","Do not rely on the render-prop overload the types advertise — it is unsupported at runtime.","For custom chunk rendering, drop down to @ark-ui/react/highlight's useHighlight."],"tags":["highlight","ui","types","api-mismatch"],"backgroundTag":null,"analyzedSha":"13692aee261402d0f4fd6eeab3a3857afcaae67b","analyzedAt":"2026-08-12T22:25:19.159Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}