Cajones•8mo ago

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

Hate to raise this issue again. VSCode updated today, and my project which hasn't had any issues in the past month now gets this error consistently. I've tried all the different flavors of fixing to no avail. Has anyone had this issue and successfully resolved it? I'm have a Fresh v1.6.8 project using preact.

13 Replies

Deno AI Helper•8mo ago

It sounds like you're encountering an issue where TypeScript is not recognizing the JSX elements for type checking. This can happen if the JSX types are not properly included in your project or if the TypeScript configuration is not set up to recognize the JSX factory functions and elements. Here are a few steps you can take to troubleshoot this issue: 1. Ensure Deno is Enabled: Make sure that Deno is enabled in your VSCode workspace. You can check this by running the Deno: Language Server Status command from the command palette and looking at the Workspace Configuration section. 2. Check JSX Configuration: According to the documentation, Deno allows you to configure the JSX import source. If you're using Preact, you should specify the JSX import source to be preact. You can do this by adding a @jsxImportSource pragma at the top of your JSX or TSX files, like so:

   /** @jsxImportSource preact */

   /** @jsxImportSource preact */

Or by configuring it in your tsconfig.json or deno.json file. 3. Ensure Correct Import Source: If you're using a CDN like esm.sh for Preact, make sure that the import source is correctly specified and that the CDN resolves the jsx-runtime module correctly. 4. TypeScript Configuration: Deno only considers certain compiler options in the compilerOptions section of a configuration file. Make sure that the JSX-related options are set correctly. For Preact, you might have something like this in your tsconfig.json:

   {
     "compilerOptions": {
       "jsx": "react",
       "jsxFactory": "h",
       "jsxFragmentFactory": "Fragment"
     }
   }

   {
     "compilerOptions": {
       "jsx": "react",
       "jsxFactory": "h",
       "jsxFragmentFactory": "Fragment"
     }
   }

Adjust the jsxFactory and jsxFragmentFactory to match Preact's API if necessary. 5. Restart VSCode: Sometimes, issues can be resolved by simply

Deno AI Helper•8mo ago

restarting your editor to ensure that all the configurations are reloaded properly. 6. Check for Updates or Bugs: If the issue persists, check if there are any updates available for the Deno extension or if there are any reported bugs that match your situation. You can report a new bug if you believe you've encountered one that hasn't been addressed yet. Remember to check the documentation for any specific details regarding JSX configuration in Deno and ensure that your project's settings align with those recommendations. 🦕

Helpful Links: Configuring JSX in Deno | Deno Docs Deno 1.4 Release Notes Deno 1.27: Major IDE Improvements Deno Docs Deno Docs Using Visual Studio Code | Deno Docs

brlewis•8mo ago

I'm encountering the same issue but with emacs; deno check main.ts and restarting deno lsp did not fix it this time. Using deno 1.40.3

brlewis•8mo ago

Here's the deno.json for my fresh project.

deno.json

CajonesOP•8mo ago

@brlewis my deno.json is very similar as well. I had been using the project for over 4 weeks with no issue. Upgraded VScode today and bam. Nothing I did resolved. Are you by chance using a devcontainer? Oh and the code compiles and runs. It is simply the linting issue in the denoloand extension @brlewis I was able to resolve my issue by disabling my devcontainer. @brlewis ok, to resolve inside my devcontainer, I had to add to all my .tsx file this line:

/** @jsxImportSource preact */

/** @jsxImportSource preact */

even though I have my deno.json configured to apply globally. The strange thing is it worked yesterday in my devcontainer, but after the VSCode update it stopped. It works fine outside of the devcontainer. So maybe a bug on the linux side with the LSP?

brlewis•8mo ago

Problem with the LSP is my guess. I don't see the same warnings from deno task check. I'm not in a container; on Ubuntu directly, using the deno snap. I don't have the same problem with fresh 1.6.5, just 1.6.8.

CajonesOP•8mo ago

Did adding the direct comment to your .tsx files help?

brlewis•8mo ago

I didn't try that. I want to avoid that solution if possible. I suppose I can put it in the one I'm working in most to easily remove later. It didn't help. I take it back. On the machine I'm using now, reverting to 1.6.5 does not fix it. On another machine the same config did not have the problem with 1.6.5. (Unfortunately I'm not near that machine now.)

sylc•8mo ago

I also noticed similar issue. I raised https://github.com/denoland/deno/issues/23360

GitHub

vscode jsx types broken in 1.42.3 · Issue #23360 · denoland/deno

Version: Deno 1.42.3 jsx types are not working anymore in VsCode on a new or existing fresh project. The error is JSX element implicitly has type 'any' because no interface 'JSX.Intrins...

cdoremus•8mo ago

I was getting these JSX errors in Fresh in Deno v1.42.3. When I downgraded the version to 1.42.2 they went away.

brlewis•8mo ago

Try deno cache main.ts https://discord.com/channels/684898665143206084/991511118524715139/1228987224586981427

nayeemrmn•8mo ago

This is fixed in deno upgrade --canary and future releases, please try it out thanks

cdoremus•8mo ago

I tried the canary build and the JSX errors went away in each of my two main Fresh apps.