SchemaDisplayPath causes a build-time type error on a fresh create-next-app project
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:
- 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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