vercel / vercel/ai-elements

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

Open Beginner friendly
#441 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.4k
Forks
283
Avg merge
32m
Merged PRs (30d)
1

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/elements/src/schema-display.tsx, focusing on SchemaDisplayPath and the dangerouslySetInnerHTML assignment around the reported line. Reproduce the issue with a fresh create-next-app project, add AI Elements, and run npm run build. Done means the generated component type-checks cleanly under the default strict TypeScript configuration.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, typescript
Domain
build-system, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
74/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.