JSX error

[tidal flame]

How do I fix this JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. error?

[timid osprey]

Hi @tidal flame. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This error usually happens in Astro projects when TypeScript is trying to type-check JSX from more than one framework (React, Preact, Solid, etc.) and their JSX settings conflict.

Astro’s docs recommend:

1. In your tsconfig.json, set jsxImportSource to the framework you use the most, for example:

{
  "compilerOptions": {
    "jsxImportSource": "react"
  }
}

(or "preact" / "solid-js" depending on your main framework). [TypeScript guide]

2. In files that use a different JSX framework than the one in jsxImportSource, add a pragma comment at the top of the file so TypeScript knows which JSX types to use:

// For Preact
/** @jsxImportSource preact */

// For Solid
/** @jsxImportSource solid-js */

This per-file pragma resolves the missing JSX.IntrinsicElements interface for that framework. [TypeScript guide]

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@tidal flame Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[tidal flame]

@timid osprey I'm not using a UI framework, this appears in .astro files.

[timid osprey]

Let me check the knowledge base for you again. One moment! :books:

---

Astro’s TypeScript docs only cover this JSX error in the context of using React/Preact/Solid components, not plain .astro files, so I can’t give a fully certain, Astro-specific fix for your exact case. [TypeScript troubleshooting]

What the docs do say is:

• If TypeScript can’t find JSX types, you may need to configure jsxImportSource in tsconfig.json to one framework (react, preact, or solid-js) and then use a pragma in files that use a different framework. [TypeScript troubleshooting]

// tsconfig.json
{
  "compilerOptions": {
    "jsxImportSource": "react" // or "preact" / "solid-js"
  }
}

/** @jsxImportSource preact */ // or solid-js

Because you’re seeing this in .astro files without a UI framework, and the docs don’t describe that scenario, the knowledge sources don’t provide a direct, documented solution. If possible, please share:

• Your tsconfig.json
• A minimal .astro file that triggers the error

so we can check whether TypeScript is accidentally trying to treat your .astro files as JSX from one of those frameworks.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@tidal flame Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[tidal flame]

@timid osprey here is my tsconfig:

{
  "extends": "astro/tsconfigs/strict",
  "include": [
    ".astro/types.d.ts",
    "**/*"
  ],
  "exclude": [
    "dist"
  ],
  "compilerOptions": {
    "strictNullChecks": true,
    "jsx": "preserve",
    "jsxImportSource": "astro",
    "types": [
      "astro/client",
      "./worker-configuration.d.ts"
    ]
  }
}

Any .astro file reproduces this error

[timid osprey]

Let me check the knowledge base for you again. One moment! :books:

---

The Astro docs only document this JSX typing error in the context of React/Preact/Solid, not when jsxImportSource is set to astro, so I can’t give a fully certain, doc-backed fix for your exact setup. [TypeScript errors]

What is documented:

• The error appears when TypeScript’s JSX settings don’t match the JSX runtime/types it expects. [TypeScript errors]
• The recommended fix is to set jsxImportSource to a supported JSX library (react, preact, or solid-js) and then use per-file pragmas when mixing frameworks. [TypeScript errors]

In your tsconfig.json you have:

"jsxImportSource": "astro"

The docs do not mention astro as a valid jsxImportSource option; they only list react (default), preact, and solid-js. [TypeScript errors]

Based on that, the only change I can confidently suggest from the docs is:

1. Set jsxImportSource to one of the documented values, e.g. React:

{
  "extends": "astro/tsconfigs/strict",
  "include": [".astro/types.d.ts", "**/*"],
  "exclude": ["dist"],
  "compilerOptions": {
    "strictNullChecks": true,
    "jsx": "preserve",
    "jsxImportSource": "react", // or "preact" / "solid-js"
    "types": [
      "astro/client",
      "./worker-configuration.d.ts"
    ]
  }
}

2. If you ever add another JSX framework, use a pragma at the top of those files:

/** @jsxImportSource preact */
// or
/** @jsxImportSource solid-js */

This is the only remediation path explicitly described in the available Astro docs for this class of JSX typing error. [TypeScript errors]

If changing jsxImportSource away from "astro" doesn’t resolve the error in .astro files, the knowledge sources don’t provide further guidance, so I can’t reliably suggest a more specific fix.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: