Skip to content

fix: resolve type error in SchemaDisplayPath dangerouslySetInnerHTML#442

Open
moritalous wants to merge 1 commit into
vercel:mainfrom
moritalous:fix/schema-display-path-type
Open

fix: resolve type error in SchemaDisplayPath dangerouslySetInnerHTML#442
moritalous wants to merge 1 commit into
vercel:mainfrom
moritalous:fix/schema-display-path-type

Conversation

@moritalous

Copy link
Copy Markdown

What

SchemaDisplayPath passed children (typed as ReactNode) directly to
dangerouslySetInnerHTML.__html, which requires string | TrustedHTML. This
caused a build-time TypeScript error under strict: true, reproducible on a
fresh, unmodified create-next-app project on its very first next build.

Fixes #441

Why

children ?? highlightedPath can resolve to a number, boolean,
ReactElement, etc., none of which are assignable to __html. Conceptually,
injecting children as raw HTML is also fragile — children should be treated
as a normal React node. This also aligns with the project guideline to avoid
dangerouslySetInnerHTML unless necessary.

How

  • When children is provided, render it normally inside the <span>.
  • Only the default highlightedPath (a string) is injected via
    dangerouslySetInnerHTML.
if (children) {
  return (
    <span className={cn("font-mono text-sm", className)} {...props}>
      {children}
    </span>
  );
}

return (
  <span
    className={cn("font-mono text-sm", className)}
    // oxlint-disable-next-line eslint-plugin-react(no-danger)
    dangerouslySetInnerHTML={{ __html: highlightedPath }}
    {...props}
  />
);

Behavior impact

All current usages in this repo render without
children, so there is no behavior change. The only difference is for callers
that previously passed an HTML string as children expecting it to be parsed
as HTML — it is now rendered as text, which is the safer and more idiomatic
React behavior.

Steps to reproduce (before this fix)

  1. npx create-next-app@latest my-app --yes
  2. cd my-app && npx ai-elements@latest
  3. npm run build → fails type-check at schema-display.tsx:110

Testing

  • pnpm check — formatting passes.
  • tsc --noEmit — schema-display.tsx type-checks cleanly (the remaining
    errors in the package are pre-existing and unrelated to this change).

children (ReactNode) was passed directly to dangerouslySetInnerHTML's
__html, which requires string | TrustedHTML, causing a build-time type
error. Render children normally and reserve HTML injection for the
default highlighted path.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 20, 2026

Copy link
Copy Markdown
Contributor

@moritalous is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SchemaDisplayPath causes a build-time type error on a fresh create-next-app project

1 participant