Ooker•11mo 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

OokerOP•11mo 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•11mo 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•11mo 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•11mo ago

Do you use return when constructing a component? I know it’s silly but that’s my usual thing to forget

OokerOP•11mo 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•11mo ago

It must be something less obvious then 😄

OokerOP•11mo 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•11mo ago

Good catch!