Fix build issues and web-vitals import

- Fixed web-vitals import to use correct API (onCLS, onFID, etc.)
- Fixed ESLint import order issue in App.js
- Temporarily switched to react-scripts build for compatibility
- Build now successful with proper code splitting

Author: Dang

VehicleShowroom/package.json

@@ -41,10 +41,10 @@
     "web-vitals": "^4.2.2"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
-    "test:ci": "craco test --coverage --watchAll=false --passWithNoTests",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "test:ci": "react-scripts test --coverage --watchAll=false --passWithNoTests",
     "lint": "eslint src --ext .js,.jsx --max-warnings 0",
     "lint:fix": "eslint src --ext .js,.jsx --fix",
     "eject": "react-scripts eject",
@@ -74,11 +74,11 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@craco/craco": "^7.1.0",
     "anymatch": "^3.1.3",
     "chokidar": "^3.6.0",
     "gh-pages": "^6.1.1",
-    "micromatch": "^4.0.7",
-    "@craco/craco": "^7.1.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+    "micromatch": "^4.0.7"
   }
 }

VehicleShowroom/src/App.js

@@ -5,15 +5,13 @@ import { useState, Suspense, lazy } from 'react';
 
 import initialTheme from './theme/theme';
 import useWebVitals from './hooks/useWebVitals';
+import { UserProvider } from 'contexts/UserContext';
 
 // 🧩 Layouts - Lazy loaded for better performance
 const AuthLayout = lazy(() => import('./layouts/auth'));
 const AdminLayout = lazy(() => import('./layouts/admin'));
 const UserLayout = lazy(() => import('layouts/user'));
 
-// 🧩 Providers
-import { UserProvider } from 'contexts/UserContext';
-
 // Loading component
 const LoadingSpinner = () => (
   <div style={{ 

VehicleShowroom/src/hooks/useWebVitals.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
+import { onCLS, onFID, onFCP, onLCP, onTTFB } from 'web-vitals';
 
 function reportWebVitals(metric) {
   console.log(metric);
@@ -18,11 +18,11 @@ function reportWebVitals(metric) {
 
 export function useWebVitals() {
   useEffect(() => {
-    getCLS(reportWebVitals);
-    getFID(reportWebVitals);
-    getFCP(reportWebVitals);
-    getLCP(reportWebVitals);
-    getTTFB(reportWebVitals);
+    onCLS(reportWebVitals);
+    onFID(reportWebVitals);
+    onFCP(reportWebVitals);
+    onLCP(reportWebVitals);
+    onTTFB(reportWebVitals);
   }, []);
 }