More work

notes/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --jsx",
     "preview": "vite preview",
     "tauri": "tauri"
   },
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@tauri-apps/cli": "^2",
+    "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.3.1",
     "typescript": "^5.2.2"
   }

notes/src/claude-generated-code.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import Card from '@mui/material/Card';
 import Button from '@mui/material/Button';
 import { 

notes/src/main.tsx

@@ -1,14 +1,19 @@
 import { invoke } from "@tauri-apps/api/core";
-import { createRoot } from 'react-dom/client';
-import React, { useState, useEffect } from 'react';
 
+import React from 'react';
+// @ts-ignore
+import ReactDOM from "react-dom/client";
 
 import NoteEditor from "./claude-generated-code";
 
 const domElem = document.getElementById("editor");
-console.log(domElem);
-const root = createRoot(domElem);
-root.render(<NoteEditor/>);
+
+ReactDOM.createRoot(domElem).render(
+  <React.StrictMode>
+    <NoteEditor/>
+  </React.StrictMode>,
+);
+
 
 let greetInputEl: HTMLInputElement | null;
 let greetMsgEl: HTMLElement | null;

notes/tsconfig.json

@@ -12,6 +12,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "jsx": "react-jsx",
 
     /* Linting */
     "strict": true,

notes/vite.config.ts

@@ -1,10 +1,13 @@
 import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
+  plugins: [react()],
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //