VSCode: Type 'Element' is not assignable to type 'ReactNode'.

[lethib]

Version: Deno 2.0.6

On VSCode, sometimes all my TSX shows the following errror:

Type 'Element' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'VNode<any>' but required in type 'ReactPortal'.deno-ts(2322)

index.d.ts(378, 9): 'children' is declared here.

However, at runtime, everything is ok. This might be due to a config in my deno.json so here it is (I have a monorepo):

My deno.json at the root of my project:

{
  "workspace": ["./services", "./web"],
  "compilerOptions": {
    "lib": ["deno.ns", "dom", "dom.iterable"],
    "types": ["react", "react-dom", "@types/react"],
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  },
  "imports": {
    "@zod": "npm:zod@^3.23.8",
    "@moment": "npm:moment",
    "@superjson": "npm:superjson"
  },
  "nodeModulesDir": "auto"
}

Inside my web folder:

{
  "name": "@stay/web",
  "tasks": {
    "dev": "deno run -A  --node-modules-dir npm:vite",
    "build": "deno run -A --node-modules-dir npm:vite build",
    "preview": "deno run -A --node-modules-dir npm:vite preview",
    "serve": "deno run --allow-net --allow-read jsr:@std/http@1/file-server dist/",
    "tailwind:generate": "deno run -A npm:tailwindcss -i ./src/index.css -o ./src/output.css --watch"
  },
  "imports": {
    "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.1",
    "@fullcalendar/core": "npm:@fullcalendar/core@^6.1.15",
    "@fullcalendar/daygrid": "npm:@fullcalendar/daygrid@^6.1.15",
    "@fullcalendar/react": "npm:@fullcalendar/react@^6.1.15",
    "@hookform/resolvers": "npm:@hookform/resolvers",
    "@radix-ui/react-dialog": "npm:@radix-ui/react-dialog@^1.1.2",
    "@radix-ui/react-label": "npm:@radix-ui/react-label@^2.1.0",
    "@radix-ui/react-popover": "npm:@radix-ui/react-popover@^1.1.2",
    "@radix-ui/react-slot": "npm:@radix-ui/react-slot@^1.1.0",
    "@tanstack/react-query": "npm:@tanstack/react-query@latest",
    "@trpc/client": "npm:@trpc/client@next",
    "@trpc/react-query": "npm:@trpc/react-query@next",
    "@types/react": "npm:@types/react@^18.3.1",
    "@types/react-dom": "npm:@types/react-dom@^18.3.1",
    "@vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.4",
    "autoprefixer": "npm:autoprefixer@^10.4.20",
    "class-variance-authority": "npm:class-variance-authority@^0.7.0",
    "clsx": "npm:clsx@^2.1.1",
    "cmdk": "npm:cmdk@^1.0.4",
    "date-fns": "npm:date-fns@^4.1.0",
    "i18next": "https://deno.land/x/[email protected]/index.js",
    "lucide-react": "npm:lucide-react@^0.460.0",
    "postcss": "npm:postcss@^8.4.49",
    "react": "npm:react@^18.3.1",
    "react-day-picker": "npm:react-day-picker@^9.4.2",
    "react-dom": "npm:react-dom@^18.3.1",
    "react-hook-form": "npm:react-hook-form@^7.53.2",
    "react-i18next": "npm:react-i18next@^15.4.1",
    "react-router": "npm:react-router",
    "tailwind-merge": "npm:tailwind-merge@^2.5.5",
    "tailwindcss": "npm:tailwindcss@^3.4.15",
    "tailwindcss-animate": "npm:tailwindcss-animate@^1.0.7",
    "vite": "npm:vite@^5.4.9",
    "components/": "./src/components/",
    "utils/": "./src/utils/",
    "hooks/": "./src/hooks/"
  },
  "exports": "./src/main.tsx",
  "fmt": {
    "exclude": [
      ".vite",
      "**/*.css",
      "dist"
    ],
    "lineWidth": 120
  },
  "lint": {
    "exclude": [
      ".vite"
    ]
  },
  "deploy": {
    "project": "toto",
    "exclude": [
      "**/node_modules"
    ],
    "include": [],
    "entrypoint": "jsr:@std/http/file-server"
  }
}

[marvinhagemeister]

Does the error occur in the latest version of Deno too? The current version is 2.2.2.

[lethib]

I'll give it a try when I face this error again. I have restarted my Mac and I don't get this error since.