- Added some checks when using window to prevent errors with SSR.

Author: jringeisen

resources/js/Layouts/AuthenticatedLayout.vue

@@ -319,6 +319,8 @@ const isOnboarding = () => {
 };
 
 const getQueryStatus = () => {
+    if (isServer) return;
+
     return new URLSearchParams(window.location.search).get('status');
 };
 

resources/js/Pages/Dashboard.vue

@@ -138,16 +138,18 @@ const isDarkMode = ref(false);
 onMounted(() => {
     isClient.value = true;
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-        isDarkMode.value = e.matches;
-        chartOptions.value = {
-            title: {
-                style: {
-                    color: e.matches ? '#a3a3a3' : '#0a0a0a',
+    if (isClient.value) {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            isDarkMode.value = e.matches;
+            chartOptions.value = {
+                title: {
+                    style: {
+                        color: e.matches ? '#a3a3a3' : '#0a0a0a',
+                    }
                 }
             }
-        }
-    });
+        });
+    }
 });
 
 const series = ref([

resources/js/Pages/Student/Dashboard.vue

@@ -213,16 +213,18 @@ const isDarkMode = ref(false);
 onMounted(() => {
     isClient.value = true;
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-        isDarkMode.value = e.matches;
-        chartOptions.value = {
-            title: {
-                style: {
-                    color: e.matches ? '#a3a3a3' : '#0a0a0a',
+    if (isClient.value) {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            isDarkMode.value = e.matches;
+            chartOptions.value = {
+                title: {
+                    style: {
+                        color: e.matches ? '#a3a3a3' : '#0a0a0a',
+                    }
                 }
             }
-        }
-    });
+        });
+    }
 });
 
 const series = ref([

resources/js/Pages/Teachers/Students/Create.vue

@@ -123,6 +123,8 @@ const form = useForm({
     timezone: '',
 });
 
+const isServer = typeof window === 'undefined'
+
 const submit = () => {
     form.transform((data) => ({
         ...data,
@@ -140,6 +142,8 @@ const isOnboarding = () => {
 };
 
 const getQueryStatus = () => {
+    if (isServer) return;
+
     return new URLSearchParams(window.location.search).get('status');
 };
 </script>

resources/js/Pages/Teachers/Students/Show.vue

@@ -204,16 +204,18 @@ const handleTimeframeChange = () => {
 onMounted(() => {
     isClient.value = true;
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-        isDarkMode.value = e.matches;
-        chartOptions.value = {
-            title: {
-                style: {
-                    color: e.matches ? '#a3a3a3' : '#0a0a0a',
+    if (isClient.value) {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            isDarkMode.value = e.matches;
+            chartOptions.value = {
+                title: {
+                    style: {
+                        color: e.matches ? '#a3a3a3' : '#0a0a0a',
+                    }
                 }
             }
-        }
-    });
+        });
+    }
 });
 
 const series = ref([