fix: atoms-in-browser

packages/platform/atoms/vite.config.ts

@@ -3,13 +3,13 @@ import path from "path";
 import { resolve } from "path";
 import { defineConfig, loadEnv } from "vite";
 import dts from "vite-plugin-dts";
+import process from "node:process";
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), ""); // .env inside of packages/platform/atoms
   const webAppUrl = env.NEXT_PUBLIC_WEBAPP_URL ?? "https://app.cal.com";
   const calcomVersion = env.NEXT_PUBLIC_CALCOM_VERSION ?? "";
   const vercelCommitSha = env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA ?? "";
-
   return {
     optimizeDeps: {
       include: [
@@ -40,14 +40,14 @@ export default defineConfig(({ mode }) => {
       }),
     ],
     define: {
-      "process.env.NEXT_PUBLIC_WEBAPP_URL": `"${webAppUrl}"`,
-      "process.env.NEXT_PUBLIC_CALCOM_VERSION": `"${calcomVersion}"`,
-      "process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA": `"${vercelCommitSha}"`,
-      "process.env.NODE_ENV": `"${mode}"`,
+      "process.env.NEXT_PUBLIC_WEBAPP_URL": JSON.stringify(webAppUrl),
+      "process.env.NEXT_PUBLIC_CALCOM_VERSION": JSON.stringify(calcomVersion),
+      "process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA": JSON.stringify(vercelCommitSha),
+      "process.env.NODE_ENV": JSON.stringify(mode),
       "process.env.__NEXT_ROUTER_BASEPATH": `""`,
-      "process.env.__NEXT_I18N_SUPPORT": `false`,
-      "process.env.__NEXT_MANUAL_TRAILING_SLASH": `false`,
-      "process.env.__NEXT_TRAILING_SLASH": `false`,
+      "process.env.__NEXT_I18N_SUPPORT": "false",
+      "process.env.__NEXT_MANUAL_TRAILING_SLASH": "false",
+      "process.env.__NEXT_TRAILING_SLASH": "false",
       "process.env": "{}",
     },
     ssr: {

packages/ui/components/credits/Credits.tsx

@@ -1,14 +1,24 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+
+/* eslint-disable prettier/prettier */
 "use client";
 
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import { CALCOM_VERSION, COMPANY_NAME, IS_CALCOM, IS_SELF_HOSTED } from "@calcom/lib/constants";
 
-// eslint-disable-next-line turbo/no-undeclared-env-vars
-const vercelCommitHash = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
+/* eslint-disable turbo/no-undeclared-env-vars */
+/* eslint-disable prettier/prettier */
+
+// Use globalThis.process?.env or fallback to empty string for browser safety
+/* eslint-disable-next-line turbo/no-undeclared-env-vars */
+const vercelCommitHash =
+  typeof process !== "undefined" && process.env && process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
+    ? process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
+    : "";
 const commitHash = vercelCommitHash ? `-${vercelCommitHash.slice(0, 7)}` : "";
-const CalComVersion = `v.${CALCOM_VERSION}-${!IS_SELF_HOSTED ? "h" : "sh"}`;
+const CalComVersion = `v.${CALCOM_VERSION || "dev"}-${!IS_SELF_HOSTED ? "h" : "sh"}`;
 
 export default function Credits() {
   const [hasMounted, setHasMounted] = useState(false);
@@ -20,18 +30,27 @@ export default function Credits() {
   return (
     <small className="text-default mx-3 mb-2 mt-1 hidden text-[0.5rem] opacity-50 lg:block">
       &copy; {new Date().getFullYear()}{" "}
-      <Link href="https://go.cal.com/credits" target="_blank" className="hover:underline">
+      <Link
+        href="https://go.cal.com/credits"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="hover:underline">
         {COMPANY_NAME}
       </Link>{" "}
       {hasMounted && (
         <>
-          <Link href="https://go.cal.com/releases" target="_blank" className="hover:underline">
+          <Link
+            href="https://go.cal.com/releases"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:underline">
             {CalComVersion}
           </Link>
           {vercelCommitHash && IS_CALCOM ? (
             <Link
               href={`https://github.com/calcom/cal.com/commit/${vercelCommitHash}`}
               target="_blank"
+              rel="noopener noreferrer"
               className="hover:underline">
               {commitHash}
             </Link>

packages/ui/components/icon/IconSprites.tsx

@@ -1,15 +1,26 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
 import SVG from "react-inlinesvg";
 
-// eslint-disable-next-line turbo/no-undeclared-env-vars
-const vercelCommitHash = process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA;
-const commitHash = vercelCommitHash ? `-${vercelCommitHash.slice(0, 7)}` : "";
+// Use globalThis.process?.env or fallback to empty string for browser safety
+const CALCOM_VERSION =
+  typeof process !== "undefined" && process.env && process.env.NEXT_PUBLIC_CALCOM_VERSION
+    ? process.env.NEXT_PUBLIC_CALCOM_VERSION
+    : "";
+const VERCEL_COMMIT_SHA =
+  typeof process !== "undefined" && process.env && process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
+    ? process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA
+    : "";
+
+const commitHash = VERCEL_COMMIT_SHA ? `-${VERCEL_COMMIT_SHA.slice(0, 7)}` : "";
 
 export function IconSprites() {
-  return (
-    <SVG
-      src={`${process.env.NEXT_PUBLIC_WEBAPP_URL}/icons/sprite.svg?v=${process.env.NEXT_PUBLIC_CALCOM_VERSION}-${commitHash}`}
-    />
-  );
+  const WEBAPP_URL =
+    (typeof process !== "undefined" && process.env && process.env.NEXT_PUBLIC_WEBAPP_URL) || "";
+  // Build URL robustly, avoid double slashes, and default to same-origin when WEBAPP_URL is unset.
+  const base = WEBAPP_URL.replace(/\/+$/, "");
+  const path = "/icons/sprite.svg";
+  const src = `${base}${path}?v=${CALCOM_VERSION}${commitHash}`.replace(/([^:]\/)\/+/g, "$1");
+  return <SVG src={src} />;
 }
 
 export default IconSprites;