fix: window on ssr error + cors problem with launcher meta (#5856)

packages/api-client/src/modules/launcher-meta/v0.ts

@@ -13,6 +13,11 @@ export class LauncherMetaManifestV0Module extends AbstractModule {
 	/**
 	 * Get the loader manifest for a given loader platform.
 	 *
+	 * launcher-meta refuses CORS preflights that ask for the `Content-Type`
+	 * header (returns 403), so we strip the default `Content-Type: application/json`
+	 * the abstract client sets — these are body-less GETs and don't need it.
+	 * Without this the browser preflight is rejected and the GET never fires.
+	 *
 	 * @param loader - Loader platform (fabric, forge, quilt, neo)
 	 */
 	public async getManifest(loader: string): Promise<LauncherMeta.Manifest.v0.Manifest> {
@@ -21,6 +26,7 @@ export class LauncherMetaManifestV0Module extends AbstractModule {
 			version: `${loader}/v0`,
 			method: 'GET',
 			skipAuth: true,
+			headers: { 'Content-Type': '' },
 		})
 	}
 }

packages/ui/src/components/chart/Chart.vue

@@ -1,13 +1,21 @@
 <!-- eslint-disable no-console -->
 <script setup>
 import dayjs from 'dayjs'
-import { defineAsyncComponent, ref } from 'vue'
+import { defineAsyncComponent, onMounted, ref } from 'vue'
 
 import { useFormatNumber } from '../../composables/index.ts'
 import Button from '../base/Button.vue'
 import Checkbox from '../base/Checkbox.vue'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
+
+// apexcharts touches `window` at module load time, so we must not let SSR
+// resolve the async component. Render only after mount on the client.
+const isClient = ref(false)
+onMounted(() => {
+	isClient.value = true
+})
+
 const formatNumber = useFormatNumber()
 
 const props = defineProps({
@@ -232,7 +240,14 @@ defineExpose({
 				<slot name="toolbar" />
 			</div>
 		</div>
-		<VueApexCharts ref="chart" :type="type" :options="chartOptions" :series="data" class="chart" />
+		<VueApexCharts
+			v-if="isClient"
+			ref="chart"
+			:type="type"
+			:options="chartOptions"
+			:series="data"
+			class="chart"
+		/>
 		<div v-if="!hideLegend" class="legend">
 			<Checkbox
 				v-for="legend in legendValues"

packages/ui/src/components/chart/CompactChart.vue

@@ -1,13 +1,20 @@
 <!-- eslint-disable eslint-comments/require-description -->
 <script setup>
 import dayjs from 'dayjs'
-import { defineAsyncComponent, ref } from 'vue'
+import { defineAsyncComponent, onMounted, ref } from 'vue'
 
 import { useFormatNumber } from '../../composables/index.ts'
 import Card from '../base/Card.vue'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
+// apexcharts touches `window` at module load time, so we must not let SSR
+// resolve the async component. Render only after mount on the client.
+const isClient = ref(false)
+onMounted(() => {
+	isClient.value = true
+})
+
 const formatNumber = useFormatNumber()
 
 const props = defineProps({
@@ -148,6 +155,7 @@ const chartOptions = ref({
 			{{ title }}
 		</div>
 		<VueApexCharts
+			v-if="isClient"
 			ref="chart"
 			type="area"
 			height="120"

packages/ui/src/layouts/wrapped/hosting/manage/components/ServerManageStats.vue

@@ -45,7 +45,7 @@
 
 			<div v-if="metric.showGraph" class="chart-space absolute bottom-0 left-0 right-0">
 				<VueApexCharts
-					v-if="!loading && metric.chartOptions"
+					v-if="isClient && !loading && metric.chartOptions"
 					type="area"
 					height="142"
 					:options="metric.chartOptions"
@@ -62,13 +62,20 @@
 import { CpuIcon, DatabaseIcon, FolderOpenIcon } from '@modrinth/assets'
 import type { Stats } from '@modrinth/utils'
 import { useStorage } from '@vueuse/core'
-import { computed, defineAsyncComponent, ref, shallowRef, watch } from 'vue'
+import { computed, defineAsyncComponent, onMounted, ref, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
 
 import { injectModrinthServerContext, injectPageContext } from '#ui/providers'
 
 const VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 
+// apexcharts touches `window` at module load time, so we must not let SSR
+// resolve the async component. Render only after mount on the client.
+const isClient = ref(false)
+onMounted(() => {
+	isClient.value = true
+})
+
 const { serverId } = injectModrinthServerContext()
 const { featureFlags } = injectPageContext()