Fix crash when using instanceof HTMLElement in some environments (#…

…3494)

This PR fixes an issue where in some environments where `HTMLElement` is
not
available (on the server) and AG Grid is used, we crashed.

This happens because the `HTMLElement` is polyfilled to an empty object.
This means that the `typeof HTMLElement !== 'undefined'` check passed,
but the `v instanceof HTMLElement` translated to `v instanceof {}` which
is invalid and resulted in a crash...

This PR solves it by checking for exactly what we need, in this case
whether the `outerHTML` property is available.

Alternatively, we could use `return v?.outerHTML ?? v`, but not sure if
that's always safe to do.

Fixes: #3471

packages/@headlessui-react/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure `Element` is available before polyfilling to prevent crashes in non-browser environments ([#3493](https://github.com/tailwindlabs/headlessui/pull/3493))
+- Fix crash when using `instanceof HTMLElement` in some environments ([#3494](https://github.com/tailwindlabs/headlessui/pull/3494))
 
 ## [2.1.8] - 2024-09-12
 

packages/@headlessui-react/src/internal/floating.tsx

@@ -133,17 +133,14 @@ export function useFloatingPanel(
   let stablePlacement = useMemo(
     () => placement,
     [
-      JSON.stringify(
-        placement,
-        typeof HTMLElement !== 'undefined'
-          ? (_, v) => {
-              if (v instanceof HTMLElement) {
-                return v.outerHTML
-              }
-              return v
-            }
-          : undefined
-      ),
+      JSON.stringify(placement, (_, v) => {
+        // When we are trying to stringify a DOM element, we want to return the
+        // `outerHTML` of the element. In all other cases, we want to return the
+        // value as-is.
+        // It's not safe enough to check whether `v` is an instanceof
+        // `HTMLElement` because some tools (like AG Grid) polyfill it to be `{}`.
+        return v?.outerHTML ?? v
+      }),
     ]
   )
   useIsoMorphicEffect(() => {