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:
- npx create-next-app@latest my-app --yes (fresh default app, App Router + TS + Tailwind)
- cd my-app && npx ai-elements@latest
- 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.
Which component is affected?
SchemaDisplayPathinpackages/elements/src/schema-display.tsxDescribe the bug
On a fresh, unmodified app generated by
create-next-app(no custom config,default
tsconfig.jsonwithstrict: true), runningnext buildright afteradding AI Elements fails during the TypeScript type-check step:
The offending line:
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:
No files are modified between these steps — the error appears on the default
generated tsconfig.json and components.
Environment
Possible fix
Render children as a normal React node and reserve dangerouslySetInnerHTML
for the default highlighted-path case only.