Fix Cloudflare Pages build (#1285)

* fix(temp): remove box shadows from tailwind config

* fix(temp): "polyfill" global during build process

* refactor: use `import.meta` instead of deprecated `process`

* oops: replace `process.server` as well

apps/frontend/nuxt.config.ts

@@ -80,6 +80,14 @@ export default defineNuxtConfig({
     },
   },
   vite: {
+    define: {
+      global: {},
+    },
+    esbuild: {
+      define: {
+        global: "globalThis",
+      },
+    },
     cacheDir: "../../node_modules/.vite/apps/knossos",
     resolve: {
       dedupe: ["vue"],

apps/frontend/src/components/ui/charts/CompactChart.client.vue

@@ -3,7 +3,7 @@ import { Card } from "@modrinth/ui";
 import VueApexCharts from "vue3-apexcharts";
 
 // let VueApexCharts
-// if (process.client) {
+// if (import.meta.client) {
 //   VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
 // }
 

apps/frontend/src/components/ui/modrinth-loading-indicator.ts

@@ -85,7 +85,7 @@ function useLoadingIndicator(opts: { duration: number; throttle: number }) {
   function start() {
     clear();
     progress.value = 0;
-    if (opts.throttle && process.client) {
+    if (opts.throttle && import.meta.client) {
       _throttle = setTimeout(() => {
         isLoading.value = true;
         _startTimer();
@@ -113,7 +113,7 @@ function useLoadingIndicator(opts: { duration: number; throttle: number }) {
 
   function _hide() {
     clear();
-    if (process.client) {
+    if (import.meta.client) {
       setTimeout(() => {
         isLoading.value = false;
         setTimeout(() => {
@@ -124,7 +124,7 @@ function useLoadingIndicator(opts: { duration: number; throttle: number }) {
   }
 
   function _startTimer() {
-    if (process.client) {
+    if (import.meta.client) {
       _timer = setInterval(() => {
         _increase(step.value);
       }, 100);

apps/frontend/src/composables/fetch.js

@@ -1,12 +1,12 @@
 export const useBaseFetch = async (url, options = {}, skipAuth = false) => {
   const config = useRuntimeConfig();
-  let base = process.server ? config.apiBaseUrl : config.public.apiBaseUrl;
+  let base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl;
 
   if (!options.headers) {
     options.headers = {};
   }
 
-  if (process.server) {
+  if (import.meta.server) {
     options.headers["x-ratelimit-key"] = config.rateLimitKey;
   }
 

apps/frontend/src/composables/theme.js

@@ -48,7 +48,7 @@ export const updateTheme = (value, updatePreference = false) => {
     if (updatePreference) theme.value.preference = value;
   }
 
-  if (process.client) {
+  if (import.meta.client) {
     document.documentElement.className = `${theme.value.value}-mode`;
   }
 

apps/frontend/src/layouts/default.vue

@@ -654,7 +654,7 @@ const navRoutes = computed(() => [
 ]);
 
 onMounted(() => {
-  if (window && process.client) {
+  if (window && import.meta.client) {
     window.history.scrollRestoration = "auto";
   }
 
@@ -667,7 +667,7 @@ watch(
     isMobileMenuOpen.value = false;
     isBrowseMenuOpen.value = false;
 
-    if (process.client) {
+    if (import.meta.client) {
       document.body.style.overflowY = "scroll";
       document.body.setAttribute("tabindex", "-1");
       document.body.removeAttribute("tabindex");

apps/frontend/src/pages/[type]/[id].vue

@@ -1500,7 +1500,7 @@ const collapsedChecklist = ref(false);
 
 const showModerationChecklist = ref(false);
 const futureProjects = ref([]);
-if (process.client && history && history.state && history.state.showChecklist) {
+if (import.meta.client && history && history.state && history.state.showChecklist) {
   showModerationChecklist.value = true;
   futureProjects.value = history.state.projects;
 }

apps/frontend/src/pages/[type]/[id]/version/[version].vue

@@ -779,7 +779,7 @@ export default defineNuxtComponent({
         featured: false,
       };
       // For navigation from versions page / upload file prompt
-      if (process.client && history.state && history.state.newPrimaryFile) {
+      if (import.meta.client && history.state && history.state.newPrimaryFile) {
         replaceFile = history.state.newPrimaryFile;
 
         try {

apps/frontend/src/pages/dashboard/collections.vue

@@ -130,7 +130,7 @@ useHead({
 const user = await useUser();
 const auth = await useAuth();
 
-if (process.client) {
+if (import.meta.client) {
   await initUserFollows();
 }
 

apps/frontend/src/pages/dashboard/notifications.vue

@@ -152,7 +152,7 @@ async function readAll() {
 
 function changePage(newPage) {
   page.value = newPage;
-  if (process.client) {
+  if (import.meta.client) {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
 }

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -465,7 +465,7 @@ const {
 } = useLazyFetch(
   () => {
     const config = useRuntimeConfig();
-    const base = process.server ? config.apiBaseUrl : config.public.apiBaseUrl;
+    const base = import.meta.server ? config.apiBaseUrl : config.public.apiBaseUrl;
 
     const params = [`limit=${maxResults.value}`, `index=${sortType.value.name}`];
 
@@ -589,7 +589,7 @@ function onSearchChange(newPageNumber) {
 
   refreshSearch();
 
-  if (process.client) {
+  if (import.meta.client) {
     const obj = getSearchUrl((currentPage.value - 1) * maxResults.value, true);
     router.replace({ path: route.path, query: obj });
   }
@@ -751,7 +751,7 @@ function toggleEnv(environment, sendRequest) {
 }
 
 function onSearchChangeToTop(newPageNumber) {
-  if (process.client) {
+  if (import.meta.client) {
     window.scrollTo({ top: 0, behavior: "smooth" });
   }
 

apps/frontend/src/plugins/1.theme.js

@@ -5,7 +5,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const cosmetics = useCosmetics();
 
   nuxtApp.hook("app:mounted", () => {
-    if (process.client && themeStore.value.preference === "system") {
+    if (import.meta.client && themeStore.value.preference === "system") {
       const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
 
       const setColorScheme = (e) => {

apps/frontend/tailwind.config.js

@@ -120,19 +120,6 @@ module.exports = {
           rawBg: "var(--landing-raw-bg)",
         },
       },
-      boxShadow: {
-        insetLg: "var(--shadow-inset-lg)",
-        inset: "var(--shadow-inset)",
-        insetSm: "var(--shadow-inset-sm)",
-        raisedLg: "var(--shadow-raised-lg)",
-        raised: "var(--shadow-raised)",
-        floating: "var(--shadow-floating)",
-        card: "var(--shadow-card)",
-        landing: {
-          blobShadow: "var(--landing-blob-shadow)",
-          cardShadow: "var(--landing-card-shadow)",
-        },
-      },
     },
   },
   plugins: [],