fix:vercel import error

frontend/src/components/Login.jsx

@@ -1,6 +1,6 @@
 // frontend/src/components/Login.jsx
 import { Link, useNavigate } from 'react-router-dom';
-import '../styles/Auth.css';
+import '../styles/auth.css';
 import { useForm } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 import { loginUser } from '../redux/actions/authActions'; // Updated import

frontend/src/components/Register.jsx

@@ -1,5 +1,5 @@
 // frontend/src/components/Register.jsx
-import "../styles/Auth.css";
+import "../styles/auth.css";
 import { Link, useNavigate } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { useDispatch, useSelector } from "react-redux";

frontend/src/routes/MainRoutes.jsx

@@ -1,53 +1,30 @@
-import React from 'react'
-import { Route, Routes, Navigate } from 'react-router-dom'
-import Login from '../components/Login'
-import Register from '../components/Register'
-import ChatInterface from '../components/ChatInterface'
-import NotFound from '../components/NotFound'
-import { useSelector } from 'react-redux'
-import AuthRoute from './AuthRoute'
+import React, { Suspense, lazy } from 'react';
+import { Route, Routes, Navigate } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import AuthRoute from './AuthRoute';
+import TypingIndicator from '../components/TypingIndicator'; 
+
+// lazy imports 
+const Login = lazy(() => import('../components/Login'));
+const Register = lazy(() => import('../components/Register'));
+const ChatInterface = lazy(() => import('../components/ChatInterface'));
+const NotFound = lazy(() => import('../components/NotFound'));
 
 const MainRoutes = () => {
-  const { isAuthenticated } = useSelector((state) => state.auth)
+  const { isAuthenticated } = useSelector((state) => state.auth);
 
   return (
-    <Routes>
-      {/* Protected routes */}
-      <Route
-        path="/"
-        element={
-          <AuthRoute>
-            <ChatInterface />
-          </AuthRoute>
-        }
-      />
-      <Route
-        path="/home"
-        element={
-          <AuthRoute>
-            <ChatInterface />
-          </AuthRoute>
-        }
-      />
-
-      {/* Public routes */}
-      <Route
-        path="/login"
-        element={
-          isAuthenticated ? <Navigate to="/" replace /> : <Login />
-        }
-      />
-      <Route
-        path="/register"
-        element={
-          isAuthenticated ? <Navigate to="/" replace /> : <Register />
-        }
-      />
+    <Suspense fallback={<TypingIndicator />}>
+      <Routes>
 
-      {/* Catch-all: show 404 page for unknown routes */}
-      <Route path="*" element={<NotFound />} />
-    </Routes>
-  )
-}
+        <Route path="/login" element={isAuthenticated ? <Navigate to="/" replace /> : <Login />} />
+        <Route path="/register" element={isAuthenticated ? <Navigate to="/" replace /> : <Register />} />
+        <Route path="/" element={<AuthRoute><ChatInterface /></AuthRoute>} />
+        <Route path="/home" element={<AuthRoute><ChatInterface /></AuthRoute>} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </Suspense>
+  );
+};
 
-export default MainRoutes
+export default MainRoutes;

frontend/vercel.json

@@ -36,5 +36,10 @@
   "buildCommand": "npm run build",
   "outputDirectory": "dist",
   "framework": "vite",
-  "installCommand": "npm install"
+  "installCommand": "npm install",
+  "functions": {
+    "src/**/*.js": {
+      "runtime": "nodejs18.x"
+    }
+  }
 }