Refactor ProfileForm component: Improve code readability by formatting error messages and UI elements. Add default avatar selection feature for user profile customization, enhancing user experience. Update button labels for clarity during avatar upload and password modification.

components/WebpackErrorHandler.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function WebpackErrorHandler() {
+  useEffect(() => {
+    // Listen for unhandled errors
+    const handleError = (event: ErrorEvent) => {
+      const error = event.error || event.message || "";
+      const errorString = String(error);
+
+      // Check if it's a webpack module loading error
+      if (
+        errorString.includes("Cannot read properties of undefined") &&
+        (errorString.includes("reading 'call'") ||
+          errorString.includes("webpack") ||
+          errorString.includes("react-server-dom-webpack"))
+      ) {
+        console.warn(
+          "Webpack module loading error detected, forcing page reload..."
+        );
+
+        // Clear all caches and reload
+        if (typeof window !== "undefined") {
+          // Clear service worker cache if exists
+          if ("serviceWorker" in navigator) {
+            navigator.serviceWorker.getRegistrations().then((registrations) => {
+              registrations.forEach((registration) => {
+                registration.unregister();
+              });
+            });
+          }
+
+          // Clear all caches
+          if ("caches" in window) {
+            caches.keys().then((names) => {
+              names.forEach((name) => {
+                caches.delete(name);
+              });
+            });
+          }
+
+          // Force hard reload after a short delay
+          setTimeout(() => {
+            window.location.reload();
+          }, 100);
+        }
+      }
+    };
+
+    // Listen for unhandled promise rejections
+    const handleRejection = (event: PromiseRejectionEvent) => {
+      const error = event.reason || "";
+      const errorString = String(error);
+
+      if (
+        errorString.includes("Cannot read properties of undefined") &&
+        (errorString.includes("reading 'call'") ||
+          errorString.includes("webpack") ||
+          errorString.includes("react-server-dom-webpack"))
+      ) {
+        console.warn(
+          "Webpack module loading error detected in promise, forcing page reload..."
+        );
+
+        if (typeof window !== "undefined") {
+          setTimeout(() => {
+            window.location.reload();
+          }, 100);
+        }
+      }
+    };
+
+    window.addEventListener("error", handleError);
+    window.addEventListener("unhandledrejection", handleRejection);
+
+    return () => {
+      window.removeEventListener("error", handleError);
+      window.removeEventListener("unhandledrejection", handleRejection);
+    };
+  }, []);
+
+  return null;
+}