Skip to content

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

Description

@moritalous

Which component is affected?

SchemaDisplayPath in packages/elements/src/schema-display.tsx

Describe the bug

On a fresh, unmodified app generated by create-next-app (no custom config,
default tsconfig.json with strict: true), running next build right after
adding AI Elements fails during the TypeScript type-check step:

./components/ai-elements/schema-display.tsx:110:34
Type error: Type 'string | number | bigint | boolean | ReactElement<...> | Iterable<ReactNode> | Promise<...>'
  is not assignable to type 'string | TrustedHTML'.
  Type 'number' is not assignable to type 'string | TrustedHTML'.

The offending line:

dangerouslySetInnerHTML={{ __html: children ?? highlightedPath }}

children is typed as ReactNode (via HTMLAttributes),
but dangerouslySetInnerHTML.__html requires string | TrustedHTML. When
children is provided it can be a number, boolean, ReactElement, etc.,
which is not assignable to __html.

Because this reproduces on a completely fresh project, any new user following
the getting-started flow hits this on their very first next build.

Expected behavior

The component generated into a default create-next-app project should
type-check cleanly under strict: true.

Steps to reproduce

Starting from nothing:

  1. npx create-next-app@latest my-app --yes (fresh default app, App Router + TS + Tailwind)
  2. cd my-app && npx ai-elements@latest
  3. npm run build

No files are modified between these steps — the error appears on the default
generated tsconfig.json and components.

Environment

  • ai-elements: 1.9.0
  • next: 16.2.9 (default create-next-app template)
  • react: 19
  • typescript: strict mode (default create-next-app tsconfig)
  • Node.js: 24.x

Possible fix

Render children as a normal React node and reserve dangerouslySetInnerHTML
for the default highlighted-path case only.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions