type errors with `deno-react` + `Typescript`

[scarf005]

Issue

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. errors are popping OOTB.

this may be related to https://github.com/denoland/deno/issues/9425.

How to reproduce

1. follow the installation steps.

$ deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest
✔ Project name: … vite-project
✔ Select a template: › deno-react
✔ Select a variant: › TypeScript

Scaffolding project in /home/scarf/repo/cata/vite-project...

Done. Now run:

  cd vite-project
  deno task dev

2. enable deno for the workspace.

System Information

ubuntu 23.04 vscode 1.78.1, with deno extension v3.17.0

[bluwy]

There's also a similar issue open in Vite recently without Deno: https://github.com/vitejs/vite/issues/13129. Not sure if it's related. There's also this Deno issue which seems to be the same: https://github.com/denoland/deno/issues/16653. The solution (https://github.com/denoland/deno/issues/16653#issuecomment-1383657630) worked a bit but there's still lingering TS errors.

cc @bartlomieju

[rpasechnikov]

Hi!

That sounds similar to an issue I had a few days ago. Updating moduleResolution to node (maybe others too) fixed it for me. Updating VS Code was ultimately the solution, which allowed me to roll back changes to moduleResolution back to bundler.

https://github.com/vitejs/vite/issues/13129

[bartlomieju]

Thanks for the ping, I'll try to investigate this problem.

[hastebrot]

as a work-around I've disabled the path to my vite application (running on deno runtime) for deno.enablePaths in .vscode/settings.json.

I've created a deno-react application using npm:create-vite-extra

❯ deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest

After I renamed src/main.jsx to src/main.tsx I had to change vite.config.mjs to include npm:@types/react

import "npm:[email protected]";
import "npm:[email protected]";
import "npm:[email protected]";

try {
  await import("npm:@types/react");
  await import("npm:@types/react-dom");
} catch (ignore) {}

the imports need to be wrapped into a try-catch because vite/deno complain about import problems, but the important thing is that ./node_modules/@types/react exists for the normal vscode typescript LSP.

---

tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "types": ["node"],
    "lib": ["esnext", "dom"],
    "jsx": "react",
    "allowImportingTsExtensions": true,
    "allowSyntheticDefaultImports": true,
    "noEmit": true
  }
}

[Andonvr]

I have the same issue, and @hastebrot 's solution didn't work for me. Can someone link me a working example?