Skip to content

.tsx widgets break frontmcp build typecheck without jsx flag and React types #445

@alexmercerpo

Description

@alexmercerpo

Describe the bug
After adding a .tsx widget under src/, frontmcp build fails with TypeScript errors even though the widget is bundled separately at runtime by uipack/esbuild (with React externalized). The default tsconfig.json has include: ["src/**/*"] and no jsx option, so the build-time typecheck step compiles the widget .tsx against a config that has no JSX support and no react types. Errors:

src/tools/ui-card.widget.tsx(1,26): error TS2307: Cannot find module 'react' or its corresponding type declarations.
src/tools/ui-card.widget.tsx(42,5): error TS17004: Cannot use JSX unless the '--jsx' flag is provided.
src/tools/ui-card.widget.tsx(42,5): error TS7026: JSX element implicitly has type 'any' ...

To Reproduce
Steps to reproduce the behavior:

  1. Create a FrontMCP v1.3.0 project with the default tsconfig.json.
  2. Add a .tsx widget file under src/ (e.g. src/tools/ui-card.widget.tsx).
  3. Run yarn build (frontmcp build).
  4. See TS2307, TS17004, TS7026 errors against the widget file.

Expected behavior
Either (a) the scaffold/generator adds "jsx": "react-jsx" and react devDeps automatically when a UI tool with a FileSource widget is created, (b) frontmcp build excludes widget files (e.g. *.widget.tsx) from the server typecheck (since they are compiled separately by uipack/esbuild at render time), or (c) a skill clearly documents the requirement.

Fix that worked: add "jsx": "react-jsx" to tsconfig.json and yarn add -D react react-dom @types/react @types/react-dom (dev-only; externalized at runtime, so they do not bloat the server bundle — confirmed ~8 KB bundle).

Screenshots
N/A.

Desktop (please complete the following information):

  • OS: macOS (Darwin 25.3.0)
  • Browser: N/A
  • Version: @frontmcp/sdk@1.3.0, @frontmcp/uipack@1.3.0; TypeScript 5.x; Node 22+

Smartphone (please complete the following information):

  • N/A

Additional context
Related: #443, #444 (FileSource resolution), and #454 (CDN-based React widgets don't render in Claude).

Metadata

Metadata

Labels

No labels
No labels

Type

No fields configured for Bug.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions