Fix: React refresh preamble error

The error "React refresh preamble was not loaded" in `sonner.tsx` suggests a problem with the Vite configuration or React refresh setup. The AI will investigate the Vite configuration (`vite.config.ts`) and the component's import/export structure to ensure proper React refresh functionality.

src/App.tsx

@@ -1,3 +1,4 @@
+
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { Suspense, lazy, useEffect } from 'react';
 import { Toaster } from "@/components/ui/sonner";

src/components/ui/sonner.tsx

@@ -1,5 +1,8 @@
+
+"use client"
+
 import { useTheme } from "next-themes"
-import { Toaster as Sonner, toast } from "sonner"
+import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
@@ -26,4 +29,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster, toast }
+export { Toaster }
+// Re-export toast function directly from sonner
+export { toast } from "sonner"

src/components/ui/use-toast.ts

@@ -1,4 +1,5 @@
 
-import { useToast, toast } from "@/hooks/use-toast";
+import { toast } from "@/components/ui/sonner"
+import { useToast } from "@/hooks/use-toast"
 
-export { useToast, toast };
+export { useToast, toast }