Ooker
Ooker•6mo ago

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: 
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.deno-ts(7026)
I've tried restarted VS Code but it doesn't help. Here are some related files: .vscode/setting.json 
{
    "debug.focusEditorOnBreak": false,
    "debug.focusWindowOnBreak": false,
    "deno.enable": true,
    "deno.unstable": true,
    "deno.codeLens.test": true,
    "typescript.suggest.paths": false,
    "javascript.suggest.paths": false,
    "deno.lint": true,
    "python.analysis.typeCheckingMode": "basic",
    "editor.defaultFormatter": "denoland.vscode-deno",
    "[typescriptreact]": {
      "editor.defaultFormatter": "denoland.vscode-deno"
    }
}
{
    "debug.focusEditorOnBreak": false,
    "debug.focusWindowOnBreak": false,
    "deno.enable": true,
    "deno.unstable": true,
    "deno.codeLens.test": true,
    "typescript.suggest.paths": false,
    "javascript.suggest.paths": false,
    "deno.lint": true,
    "python.analysis.typeCheckingMode": "basic",
    "editor.defaultFormatter": "denoland.vscode-deno",
    "[typescriptreact]": {
      "editor.defaultFormatter": "denoland.vscode-deno"
    }
}
aux/web/deno.json 
{
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts"
  },
  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "yaml_to_ts": "https://deno.land/x/yaml_to_ts@v0.1.0/mod.ts"
  },
  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
  "exclude": ["**/_fresh/*"]
}
{
  "tasks": {
    "start": "deno run -A --watch=static/,routes/ dev.ts",
    "build": "deno run -A dev.ts build",
    "preview": "deno run -A main.ts"
  },
  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
  "imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.2",
    "preact/": "https://esm.sh/preact@10.19.2/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
    "twind": "https://esm.sh/twind@0.16.19",
    "twind/": "https://esm.sh/twind@0.16.19/",
    "yaml_to_ts": "https://deno.land/x/yaml_to_ts@v0.1.0/mod.ts"
  },
  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
  "exclude": ["**/_fresh/*"]
}
8 Replies
Ooker
Ooker•6mo ago
core/deno.json 
{
  "fmt": {
    "files": {
      "include": [],
      "exclude": []
    },
    "options": {}
  },
  "lint": {
    "files": {
      "include": [],
      "exclude": []
    },
    "rules": {
      "tags": [],
      "include": [],
      "exclude": []
    }
  },
  "tasks": {},
  "test": {
    "files": {
      "include": [],
      "exclude": []
    }
  },
  "compilerOptions": {
    "allowJs": true,
    "strict": true
  }
}
{
  "fmt": {
    "files": {
      "include": [],
      "exclude": []
    },
    "options": {}
  },
  "lint": {
    "files": {
      "include": [],
      "exclude": []
    },
    "rules": {
      "tags": [],
      "include": [],
      "exclude": []
    }
  },
  "tasks": {},
  "test": {
    "files": {
      "include": [],
      "exclude": []
    }
  },
  "compilerOptions": {
    "allowJs": true,
    "strict": true
  }
}
Deno AI Helper
Deno AI Helper•6mo ago
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: 
   /** @jsxImportSource preact */
   
   /** @jsxImportSource preact */
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 the
Deno AI Helper
Deno AI Helper•6mo ago
issue. 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.
Helpful Links: Configuring TypeScript in Deno | Deno Docs Configuring JSX in Deno | Deno Docs Configuration File | Deno Docs Overview of TypeScript in Deno | Deno Docs
king8fisher
king8fisher•6mo ago
Do you use return when constructing a component? I know it’s silly but that’s my usual thing to forget
Ooker
Ooker•6mo ago
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
king8fisher
king8fisher•6mo ago
It must be something less obvious then 😄
Ooker
Ooker•6mo ago
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/preact@10.19.2/"
  }
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  },
  "imports": {
    "preact/": "https://esm.sh/preact@10.19.2/"
  }
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=&
king8fisher
king8fisher•6mo ago
Good catch!
More Posts
Using Deno.Command to run tailwindcss with watch flag not workingIf I do `new Deno.Command(Deno.execPath(), {args:["run", "-A", "npm:tailwindcss", "-i", "./styles.csESBuild SASS PluginHey, I have developed this Plugin: https://github.com/DenoPlayground/esbuild-plugin-sass But I havCan't spawn a shell properly using Deno!```ts const bash = (() => { const bashProc = spawn("bash"); bashProc.stdout.on("data", (data: sHow to optimize imports on deno deploy?I have a medium project (44 files) deployed on deno deploy, where works. But, I'm getting inconsistLSP complains about missing package mongodbVS Code keeps complaining about "uncached or missing npm package: mongodb". `Cache "npm:mongodb" andnode.js to Deno remix template migrationI would like to migrate one of the templates in remix from node.js to Deno. I am not sure how to do How to pass value from one form to another?I want to design a form which has two input text field. What users type in field 1 will be passed toHow to build a Response object with the 'url' property setWriting unit tests. Some functions parse Response objects. How do I create some where the `url` propWhy Deno is not a library?For example, I'd like to embed JavaScript (Deno) on FreeBasic or Rust to able Users to write JavaScr`deno cache` consistently failing with the same errorerror: error sending request for url (https://deno.land/std@0.152.0/http/negotiation.ts): dispatch t