Uncaught SyntaxError: Invalid or unexpected token (at react.js?v=4ace817c:1:1)

Question

Im building an app using react in vite with shadcn UI library and so

import { useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";

import "./App.css";
import "./no-scroll.css";

import sideImg from "./assets/01.png";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ThemeProvider } from "./components/theme-provider";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "./components/ui/drawer";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Input } from "./components/ui/input";
import { cn } from "./lib/utils";
import { useState } from "react";

const formSchema = z.object({
  username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
  }),
  pwd: z.string().min(4, {
    message: "Password Should Be At least 4 Characters.",
  }),
});

export default function Home() {
  try {
    const [open, setOpen] = useState(false);
  const [openFailed, setOpenFailed] = useState(false);
  const [openLogged, setOpenLogged] = useState(false);

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      pwd: "",
    },
  });

  function onSubmit(values: z.infer<typeof formSchema>) {
    window.alert(JSON.stringify(values));
    setOpen(true);
  }

  return (
    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
      <h1 className="title">Welcome To TeaDB</h1>
      <p className="para">An Easy Way To Manage Tea Data</p>
      <img src={sideImg} className="sideImg img" />
      <Drawer>
        <DrawerTrigger asChild>
          <Button>Get Started</Button>
        </DrawerTrigger>
        <DrawerContent>
          <div className="mx-auto w-full max-w-sm">
            <DrawerHeader>
              <DrawerTitle>Log In</DrawerTitle>
              <DrawerDescription>
                Log In With The Credintials From The Admin
              </DrawerDescription>
            </DrawerHeader>

            <Form {...form}>
              <form
                onSubmit={form.handleSubmit(onSubmit)}
                className="space-y-8"
              >
                <FormField
                  control={form.control}
                  name="username"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Username</FormLabel>
                      <FormControl>
                        <Input placeholder="Username" {...field} />
                      </FormControl>
                      <FormMessage />
                      <div className="space-reducer"></div>
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="pwd"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Password</FormLabel>
                      <FormControl>
                        <Input placeholder="Password" {...field} />
                      </FormControl>
                      <FormDescription>Enter The Password</FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </form>
            </Form>

            <DrawerFooter>
              <Button onClick={form.handleSubmit(onSubmit)}>Continue</Button>
              <DrawerClose asChild>
                <Button variant="outline">Cancel</Button>
              </DrawerClose>
            </DrawerFooter>
          </div>
        </DrawerContent>
      </Drawer>
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Loging In...</AlertDialogTitle>
            <AlertDialogDescription>
              Please wait we are currently verifying your credintials
            </AlertDialogDescription>
          </AlertDialogHeader>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="72"
            height="72"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={cn("animate-loader")}
          >
            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
          </svg>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog open={openFailed} onOpenChange={setOpenFailed}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Failed To Log In</AlertDialogTitle>
            <AlertDialogDescription>
              The entered username or password is incorrect
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Okay</AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog open={openLogged} onOpenChange={setOpenLogged}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Succsefully Logged In</AlertDialogTitle>
            <AlertDialogDescription>
              Click continue to go the dashboard
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction asChild>
              <Link href="https://google.com">Continue</Link>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </ThemeProvider>
  );
  } catch (err) {
    console.log(`sss : ${err}`);
  }
}

Uncaught SyntaxError: Invalid or unexpected token (at react.js?v=4ace817c:1:1)

I tried EVERY possible think i know and i could do and it wont go away.

the page wont load. i mean the the page's tab's title and icon loads but not other

i also tried checking for any mistaken errors like for extra {} and mis used imports

it's like my react page dosent load however i commented some Imports and the relative components of those and it loaded after commenting these:

// import {
//   AlertDialog,
//   AlertDialogAction,
//   AlertDialogCancel,
//   AlertDialogContent,
//   AlertDialogDescription,
//   AlertDialogFooter,
//   AlertDialogHeader,
//   AlertDialogTitle,
// } from "@/components/ui/alert-dialog";

// import { cn } from "./lib/utils";

// import Link from "next/link";

and also these

      {/* <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Loging In...</AlertDialogTitle>
            <AlertDialogDescription>
              Please wait we are currently verifying your credintials
            </AlertDialogDescription>
          </AlertDialogHeader>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="72"
            height="72"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className={cn("animate-loader")}
          >
            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
          </svg>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog open={openFailed} onOpenChange={setOpenFailed}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Failed To Log In</AlertDialogTitle>
            <AlertDialogDescription>
              The entered username or password is incorrect
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Okay</AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      <AlertDialog open={openLogged} onOpenChange={setOpenLogged}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Succsefully Logged In</AlertDialogTitle>
            <AlertDialogDescription>
              Click continue to go the dashboard
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction asChild>
              <Link href="https://google.com">Continue</Link>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog> */}
    ```