JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements'
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 separate the project to learn the framework easier, but now I want to join them together, so that I can debug the core easier. Now every component has this problem:
I've tried restarted VS Code but it doesn't help. Here are some related files:
.vscode/setting.json
aux/web/deno.json
8 Replies
core/deno.json
The error message you're encountering,
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists
, typically indicates that TypeScript is not recognizing the JSX elements you're using. This can happen if the JSX environment is not properly configured.
From the deno.json
configuration you've provided, it looks like you're using Preact with the new JSX transforms ("jsx": "react-jsx", "jsxImportSource": "preact"
). This should automatically import the necessary JSX functions from Preact without needing to import them in every file.
However, if you're still encountering the issue, here are a few steps you can take to troubleshoot based on the documentation:
1. Ensure the JSX pragma is set correctly: According to the documentation, you can use the JSX pragma to set the JSX import source. For Preact, you would use:
Make sure this is at the top of your JSX/TSX files if you're not setting the jsxImportSource
in your deno.json
.
2. Check for current limitations: There are some known limitations with JSX import source support in Deno. For instance, a JSX module without any imports or exports might not transpile properly when type checking. To work around this issue, you can add export {}
to the file or use the --no-check
flag.
3. Verify your Deno settings: Your .vscode/settings.json
looks correct for enabling Deno support in VS Code. Make sure that the Deno extension is properly installed and that you've reloaded VS Code after making changes to the settings.
4. Check for conflicts with other extensions: Sometimes, other extensions can interfere with the Deno extension. Try disabling other TypeScript or JavaScript related extensions to see if that resolves theissue.
5. Restart the Deno Language Server: Sometimes, the language server might need a restart to pick up changes in the configuration. You can do this by opening the command palette in VS Code (
Ctrl+Shift+P
or Cmd+Shift+P
on Mac) and typing "Restart Deno Language Server".
6. Check your import map: Ensure that your import map is correctly resolving the JSX runtime modules. Deno will not try any other specifier at runtime than the one that is emitted, so make sure that the paths in your import map are correct and can be resolved.
If you've gone through these steps and the issue persists, it might be helpful to look at the actual JSX/TSX code that's causing the error. There could be something specific in the code that's not conforming to the expected JSX types.
Remember that Deno has built-in support for JSX in both .jsx
and .tsx
files, and it uses a default configuration for JSX that is different from the defaults for tsc
.Do you use return when constructing a component? I know it’s silly but that’s my usual thing to forget
yes of course. My code works fine when it's in a separate project. All I do is to copy it to the bigger one
It must be something less obvious then 😄
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:
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)Stack Overflow
JSX element implicitly has type 'any' because no interface 'JSX.Int...
<Head>
<title>Real Estate API Application</title>
<meta name="description" content="Generated by create next app" />
<meta name=&
Good catch!