fix(ui): css is not defined error in production build (#9603)

Related: #9456 Fixes #9598 This ensures that the `CSS` property is accessed safely, preventing the "CSS is not defined" error
payloadcms · Nov 28, 2024 · 36a6a19 · 36a6a19
1 parent 3da9be0
commit 36a6a19
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/ui/src/elements/AnimateHeight/index.tsx b/packages/ui/src/elements/AnimateHeight/index.tsx
@@ -1,3 +1,4 @@
+'use client'
 import React, { useEffect, useRef } from 'react'
 
 import { usePatchAnimateHeight } from './usePatchAnimateHeight.js'

diff --git a/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts b/packages/ui/src/elements/AnimateHeight/usePatchAnimateHeight.ts
@@ -1,3 +1,4 @@
+'use client'
 import { useEffect, useMemo, useRef } from 'react'
 
 export const usePatchAnimateHeight = ({
@@ -10,7 +11,10 @@ export const usePatchAnimateHeight = ({
   open: boolean
 }): { browserSupportsKeywordAnimation: boolean } => {
   const browserSupportsKeywordAnimation = useMemo(
-    () => (CSS.supports ? Boolean(CSS.supports('interpolate-size', 'allow-keywords')) : false),
+    () =>
+      typeof CSS !== 'undefined' && CSS && CSS.supports
+        ? Boolean(CSS.supports('interpolate-size', 'allow-keywords'))
+        : false,
     [],
   )