Making vite and deno play nice

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import reactLogo from './assets/react.svg';
 import './App.css'
 
@@ -18,7 +18,7 @@ function App() {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
+        <button onClick={() => setCount((count: number) => count + 1)}>
           count is {count}
         </button>
         <p>

client/src/main.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from './App'
+import App from './App.tsx'
 import './index.css'
 
 const container = document.getElementById("root")!;

deno.json

@@ -9,7 +9,16 @@
     "vite:build": "deno run -A --node-modules-dir npm:vite build"
   },
   "imports": {
-    "react": "npm:react",
-    "react-dom": "npm:react-dom"
+    "vite": "npm:vite@^5.2.11",
+    "vitejs/plugin-react": "npm:@vitejs/plugin-react@^4.3.0",
+    "react": "npm:react@^18.3.1",
+    "react-dom": "npm:react-dom@^18.3.1",
+    "@types/react": "npm:@types/react@^18.3.3"
+  },
+  "compilerOptions": {
+    "types": ["react", "react-dom", "@types/react", "vite/client"],
+    "lib": ["dom", "dom.iterable", "esnext", "deno.ns"],
+    "jsx": "react-jsx",    
+    "jsxImportSource": "react"
   }
 }

vite.config.mjs

@@ -1,8 +1,6 @@
-import { defineConfig } from 'npm:vite@^5.2.11'
-import react from 'npm:@vitejs/plugin-react@^4.3.0'
-
-import 'npm:react@^18.3.1'
-import 'npm:react-dom@^18.3.1'
+import { defineConfig } from "vite"
+import react from "vitejs/plugin-react"
+import "react"
 
 // https://vitejs.dev/config/
 export default defineConfig({