How to define JSX.IntrinsicElements using nano_jsx with Deno?

Question

How do I get rid of this error?

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)

Here's the problematic code:

const problematicCode = <div>Hello world</div>

You have described a TypeScript compiler diagnostic error, but haven't explained how it was produced. Following the link to the Deno Deploy playground, I don't see any diagnostic error messages. Please [edit](https://stackoverflow.com/posts/76191604/edit) the question to clarify how the issue was encountered, providing each required step so that others can reproduce the issue. Also, please [include the problematic code as text instead of images](https://meta.stackoverflow.com/questions/285551/why-should-i-not-upload-images-of-code-data-errors). Help us help you! — jsejcksn, May 07 '23 at 01:29
Deno Deploy doesn't show the error, VSCode does! The problematic code is any native html tag in jsx — ThomasReggi, May 07 '23 at 15:18

ThomasReggi · Accepted Answer · 2023-05-07T17:45:05.517

For Nano JSX to declare the jsx type in a single file use:

/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "https://deno.land/x/nano_jsx@v0.0.37/mod.ts";

For Preact:

/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "https://esm.sh/preact@10.8.2";

Fresh uses the deno.json config with the preact import map like this:

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }

1 Answers1