JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. When using Preact v10.16.0

[sant123]

This is my deno.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts",
    "vpn": "DENO_DEPLOYMENT_ID=\"$(git rev-parse HEAD)\" deno run -A main.ts"
  },
  "imports": {
    "$fresh/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/*[email protected]",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/@preact/[email protected]"
  }
}

Thanks!

[marvinhagemeister]

Can you check that the deno vscode plugin is initialized? There is a command for that in the vscode command palette.

[sant123]

Yep it is, in fact this is a project I'm currently running. Changing it to Preact v10.15.1 works good. That's my workaround for now.

[sant123]

Screencast.from.2023-07-18.14-03-35.webm

[afifurrohman-id]

Screencast.from.2023-07-18.14-03-35.webm

Solutions

1. Ctrl/Cmd + Shift + P then choose Reload Window (vscode)
2. run fresh

deno task start

and reload browser window (deno automatically cache missing dependencies)

[afifurrohman-id]

I use all latest preact / twind and it's work fine

[sant123]

Really weird @afifurrohman-id. I followed the steps you provided + I added --reload in my task to renew cache but still is showing that warning.

[sant123]

Alright I think I figured out the issue, but the workaround is a little odd to me:

To replicate the issue:

• Close any VSCode instance
• Delete Deno's cache. On Linux rm -r $HOME/.cache/deno
• Open a Fresh project with VSCode and select any .tsx file

You should see something like this:

• Run deno task start
• Now restart the Deno language server

Now you should be able to see the error above:

• To get rid of this annoying issue, stop the fresh server and run deno check main.ts

My question is, why using deno check solves the issue? I tried running with both dev.ts and main.ts and did not work.

[mct-dev]

@sant123 this worked for me. Idk why deno check works either, but it did. I was just using the default fresh template from their "Getting Started", as well. Might be worth fixing...

[marvinhagemeister]

FWIW For people commenting here: It's not an issue with Fresh but with Deno's LSP. We are aware of the issue but haven't found the root cause yet nor a reliable way to reproduce it. Sometimes I can reproduce it and when I try again it doesn't work anymore. The steps listed earlier in the thread don't work for me to reproduce it.

My guess as to why deno check works is that it may refresh the internal type cache or something.

[marvinhagemeister]

I'll transfer this upstream to the deno cli repository, since this is not an issue with Fresh.

[guy-borderless]

for me restarting the LSP / vscode didn't do it, but running deno check main.ts and then restarting the LSP did.

[fhucko]

Follow documentation at https://docs.deno.com/runtime/manual/advanced/jsx_dom/jsx. There are multiple options, the least intrusive seems to be having deno.jsonc with this:

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/[email protected]"
  }

[ooker777]

In my case, I have a core program, and from that I have auxiliary components¹: test, web app, cli app. Initially I worked on the core + cli app + test, then recently I work on the web app with Fresh. At first I separated the project to learn the framework easier. Then I joined them together so that I could debug the core easier. My code works fine when it's in a separate project; all I do is to copy it to the bigger one. Now every component has this problem:

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

Reload VS Code doesn't help.

It turns out that VS Code can recognize the deno.json file in the root folder, not the component¹ folder (i.e. ./aux/web/deno.json). The file also have to have at least these line:

  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "imports": {
    "preact/": "https://esm.sh/[email protected]/"
  }

[adamzerner]

deno check main.ts didn't solve the problem for me in my Fresh project.

[nayeemrmn]

@adamzerner There was a regression that was fixed recently, try with deno upgrade --canary.

[adamzerner]

@nayeemrmn Looks like that did the trick. Thanks.

[phoenisx]

I am not sure why, but this could be because of typescript typings that the following deno config works and fixes the issue present here:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "https://esm.sh/[email protected]",
  }
}

while the following is broken:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"]
  },
  "nodeModulesDir": "auto",
  "imports": {
    "react": "npm:react@^18.3.1",
    "react-dom": "npm:react-dom@^18.3.1"
  }
}

[nayeemrmn]

@phoenisx The types for npm:react are in npm:@types/react, you have to link it:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "jsxImportSourceTypes": "@types/react",
    "lib": ["dom", "dom.iterable", "dom.asynciterable", "deno.ns"]
  },
  "nodeModulesDir": "auto",
  "imports": {
    "react": "npm:react@^18.3.1",
    "react-dom": "npm:react-dom@^18.3.1",
    "@types/react": "npm:@types/react@^18.3.11"
  }
}

https://docs.deno.com/runtime/reference/jsx/#jsximportsourcetypes

[sant123]

@nayeemrmn do you know if there is a way for a module set a certain @types in deno.json? For example this is how I get types from both react and react-dom/server in code:

// @deno-types="@types/react"
import { version } from "react";

// @deno-types="npm:@types/react-dom@^18.3.1/server"
import { renderToStaticMarkup } from "react-dom/server";

const html = renderToStaticMarkup(<h1>Hello world!</h1>);

console.log(html, version);

It would be nice to not type @deno-types... for each react import.

[sant123]

Just found what I mentioned #25633