fix: polyfills structuredClone (#2478)

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/BasicCreateSegmentModal.tsx

@@ -7,6 +7,7 @@ import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
 import { createSegmentAction } from "@formbricks/ee/advancedTargeting/lib/actions";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TBaseFilter, TSegment, ZSegmentFilters } from "@formbricks/types/segment";
 import { Button } from "@formbricks/ui/Button";

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/BasicSegmentSettings.tsx

@@ -9,6 +9,7 @@ import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { isAdvancedSegment } from "@formbricks/lib/segment/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TBaseFilter, TSegment, TSegmentWithSurveyNames, ZSegmentFilters } from "@formbricks/types/segment";

apps/web/app/(app)/environments/[environmentId]/integrations/notion/components/AddIntegrationModal.tsx

@@ -13,6 +13,7 @@ import { useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TIntegrationInput } from "@formbricks/types/integration";
 import {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx

@@ -5,6 +5,7 @@ import { toast } from "react-hot-toast";
 import { BsArrowDown, BsArrowReturnRight } from "react-icons/bs";
 
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import {
   TSurvey,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx

@@ -13,6 +13,7 @@ import toast from "react-hot-toast";
 
 import { MultiLanguageCard } from "@formbricks/ee/multiLanguage/components/MultiLanguageCard";
 import { extractLanguageCodes, getLocalizedValue, translateQuestion } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { checkForEmptyFallBackValue, extractRecallInfo } from "@formbricks/lib/utils/recall";
 import { TProduct } from "@formbricks/types/product";
 import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx

@@ -12,6 +12,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 import { createSegmentAction } from "@formbricks/ee/advancedTargeting/lib/actions";
 import { extractLanguageCodes, getEnabledLanguages } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { useDocumentVisibility } from "@formbricks/lib/useDocumentVisibility";
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/TargetingCard.tsx

@@ -8,6 +8,7 @@ import { useEffect, useMemo, useState } from "react";
 import { toast } from "react-hot-toast";
 
 import { cn } from "@formbricks/lib/cn";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { isAdvancedSegment } from "@formbricks/lib/segment/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TBaseFilter, TSegment, TSegmentCreateInput, TSegmentUpdateInput } from "@formbricks/types/segment";

apps/web/app/lib/templates.ts

@@ -1,4 +1,5 @@
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { TProduct } from "@formbricks/types/product";
 import { TSurveyQuestion } from "@formbricks/types/surveys";
 import { TTemplate } from "@formbricks/types/templates";

packages/ee/advancedTargeting/components/AdvancedTargetingCard.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
 import { cn } from "@formbricks/lib/cn";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TBaseFilter, TSegment, TSegmentCreateInput, TSegmentUpdateInput } from "@formbricks/types/segment";

packages/ee/advancedTargeting/components/CreateSegmentModal.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TBaseFilter, TSegment, ZSegmentFilters } from "@formbricks/types/segment";

packages/ee/advancedTargeting/components/SegmentEditor.tsx

@@ -2,6 +2,7 @@ import { MoreVertical, Trash2 } from "lucide-react";
 import { useState } from "react";
 
 import { cn } from "@formbricks/lib/cn";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import {
   addFilterBelow,
   addFilterInGroup,

packages/ee/advancedTargeting/components/SegmentFilter.tsx

@@ -11,6 +11,7 @@ import { useEffect, useState } from "react";
 import z from "zod";
 
 import { cn } from "@formbricks/lib/cn";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import {
   convertMetricToText,
   convertOperatorToText,

packages/ee/advancedTargeting/components/SegmentSettings.tsx

@@ -6,6 +6,7 @@ import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
 import { cn } from "@formbricks/lib/cn";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TBaseFilter, TSegment, TSegmentWithSurveyNames, ZSegmentFilters } from "@formbricks/types/segment";

packages/lib/actionClass/service.ts

@@ -17,6 +17,7 @@ import { ZId } from "@formbricks/types/environment";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 
 import { ITEMS_PER_PAGE, SERVICES_REVALIDATION_INTERVAL } from "../constants";
+import { structuredClone } from "../pollyfills/structuredClone";
 import { formatDateFields } from "../utils/datetime";
 import { validateInputs } from "../utils/validate";
 import { actionClassCache } from "./cache";

packages/lib/i18n/reverseTranslation.ts

@@ -3,6 +3,7 @@ import "server-only";
 import { TLegacySurvey, ZLegacySurvey } from "@formbricks/types/LegacySurvey";
 import { TI18nString, TSurvey } from "@formbricks/types/surveys";
 
+import { structuredClone } from "../pollyfills/structuredClone";
 import { isI18nObject } from "./utils";
 
 // Helper function to extract a regular string from an i18nString.

packages/lib/i18n/utils.ts

@@ -37,6 +37,8 @@ import {
   TSurveyQuestion,
 } from "@formbricks/types/surveys";
 
+import { structuredClone } from "../pollyfills/structuredClone";
+
 // Helper function to create an i18nString from a regular string.
 export const createI18nString = (
   text: string | TI18nString,

packages/lib/package.json

@@ -32,7 +32,8 @@
     "nodemailer": "^6.9.13",
     "posthog-node": "^4.0.0",
     "server-only": "^0.0.1",
-    "tailwind-merge": "^2.2.2"
+    "tailwind-merge": "^2.2.2",
+    "@ungap/structured-clone": "^1.2.0"
   },
   "devDependencies": {
     "@formbricks/tsconfig": "*",
@@ -42,6 +43,7 @@
     "eslint-config-formbricks": "workspace:*",
     "ts-node": "^10.9.2",
     "vitest": "^1.5.0",
-    "vitest-mock-extended": "^1.3.1"
+    "vitest-mock-extended": "^1.3.1",
+    "@types/ungap__structured-clone": "^1.2.0"
   }
 }

packages/lib/pollyfills/structuredClone.ts

@@ -0,0 +1,11 @@
+import structuredClonePolyfill from "@ungap/structured-clone";
+
+let structuredCloneExport = structuredClone;
+
+if (typeof structuredCloneExport === "undefined") {
+  // @ts-expect-error
+  structuredCloneExport = structuredClonePolyfill;
+}
+
+// export default structuredCloneExport;
+export { structuredCloneExport as structuredClone };

packages/lib/segment/service.ts

@@ -33,6 +33,7 @@ import {
   getTotalOccurrencesForAction,
 } from "../action/service";
 import { SERVICES_REVALIDATION_INTERVAL } from "../constants";
+import { structuredClone } from "../pollyfills/structuredClone";
 import { surveyCache } from "../survey/cache";
 import { getSurvey } from "../survey/service";
 import { validateInputs } from "../utils/validate";

packages/lib/survey/service.ts

@@ -26,6 +26,7 @@ import { getDisplaysByPersonId } from "../display/service";
 import { reverseTranslateSurvey } from "../i18n/reverseTranslation";
 import { personCache } from "../person/cache";
 import { getPerson } from "../person/service";
+import { structuredClone } from "../pollyfills/structuredClone";
 import { productCache } from "../product/cache";
 import { getProductByEnvironmentId } from "../product/service";
 import { responseCache } from "../response/cache";

packages/lib/utils/recall.ts

@@ -1,6 +1,7 @@
 import { TI18nString, TSurvey, TSurveyQuestion, TSurveyQuestionsObject } from "@formbricks/types/surveys";
 
 import { getLocalizedValue } from "../i18n/utils";
+import { structuredClone } from "../pollyfills/structuredClone";
 
 export interface fallbacks {
   [id: string]: string;

packages/surveys/src/components/general/Survey.tsx

@@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { formatDateWithOrdinal, isValidDateString } from "@formbricks/lib/utils/datetime";
 import { extractFallbackValue, extractId, extractRecallInfo } from "@formbricks/lib/utils/recall";
 import { SurveyBaseProps } from "@formbricks/types/formbricksSurveys";

packages/ui/QuestionFormInput/components/RecallQuestionSelect.tsx

@@ -11,6 +11,7 @@ import {
 import { RefObject, useEffect, useMemo, useState } from "react";
 
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { replaceRecallInfoWithUnderline } from "@formbricks/lib/utils/recall";
 import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys";
 

packages/ui/QuestionFormInput/index.tsx

@@ -6,6 +6,7 @@ import { RefObject, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 
 import { extractLanguageCodes, getEnabledLanguages, getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { useSyncScroll } from "@formbricks/lib/utils/hooks/useSyncScroll";
 import {
   extractId,

packages/ui/SurveysList/actions.ts

@@ -6,6 +6,7 @@ import { getServerSession } from "next-auth";
 import { prisma } from "@formbricks/database";
 import { authOptions } from "@formbricks/lib/authOptions";
 import { hasUserEnvironmentAccess } from "@formbricks/lib/environment/auth";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { canUserAccessSurvey, verifyUserRoleAccess } from "@formbricks/lib/survey/auth";
 import { surveyCache } from "@formbricks/lib/survey/cache";
 import { deleteSurvey, duplicateSurvey, getSurvey, getSurveys } from "@formbricks/lib/survey/service";

packages/ui/Targeting/BasicSegmentEditor.tsx

@@ -1,3 +1,4 @@
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import { deleteResource, isResourceFilter, moveResource } from "@formbricks/lib/segment/utils";
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import { TBaseFilters, TSegment } from "@formbricks/types/segment";

packages/ui/Targeting/BasicSegmentFilter.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import z from "zod";
 
 import { cn } from "@formbricks/lib/cn";
+import { structuredClone } from "@formbricks/lib/pollyfills/structuredClone";
 import {
   convertOperatorToText,
   convertOperatorToTitle,

pnpm-lock.yaml

@@ -666,6 +666,9 @@ importers:
       '@t3-oss/env-nextjs':
         specifier: ^0.9.2
         version: 0.9.2(typescript@5.3.3)(zod@3.22.4)
+      '@ungap/structured-clone':
+        specifier: ^1.2.0
+        version: 1.2.0
       aws-crt:
         specifier: ^1.21.2
         version: 1.21.2
@@ -709,6 +712,9 @@ importers:
       '@types/mime-types':
         specifier: ^2.1.4
         version: 2.1.4
+      '@types/ungap__structured-clone':
+        specifier: ^1.2.0
+        version: 1.2.0
       dotenv:
         specifier: ^16.4.5
         version: 16.4.5
@@ -9053,6 +9059,10 @@ packages:
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
     dev: true
 
+  /@types/ungap__structured-clone@1.2.0:
+    resolution: {integrity: sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA==}
+    dev: true
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false