From f2c80c420741fad430e454e28fed3d1e2382d617 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 27 Sep 2024 11:32:12 +0200
Subject: [PATCH] Ensure `Element` is available before polyfilling (#3493)

In some environments `Element` won't be available, which is needed for
the `Element.prototype.getAnimations` polyfill. If `Element` is not
available at all, it means that we are not in a browser so we don't need
the polyfill.

Fixes: #3490
---
 packages/@headlessui-react/CHANGELOG.md                | 4 +++-
 packages/@headlessui-react/src/hooks/use-transition.ts | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index f750900bfe..f2a1259258 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Ensure `Element` is available before polyfilling to prevent crashes in non-browser environments ([#3493](https://github.com/tailwindlabs/headlessui/pull/3493))
 
 ## [2.1.8] - 2024-09-12
 
diff --git a/packages/@headlessui-react/src/hooks/use-transition.ts b/packages/@headlessui-react/src/hooks/use-transition.ts
index bb7bec4c7b..686839d344 100644
--- a/packages/@headlessui-react/src/hooks/use-transition.ts
+++ b/packages/@headlessui-react/src/hooks/use-transition.ts
@@ -7,12 +7,13 @@ import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 if (
   typeof process !== 'undefined' &&
   typeof globalThis !== 'undefined' &&
+  typeof Element !== 'undefined' &&
   // Strange string concatenation is on purpose to prevent `esbuild` from
   // replacing `process.env.NODE_ENV` with `production` in the build output,
   // eliminating this whole branch.
   process?.env?.['NODE' + '_' + 'ENV'] === 'test'
 ) {
-  if (typeof Element.prototype.getAnimations === 'undefined') {
+  if (typeof Element?.prototype?.getAnimations === 'undefined') {
     Element.prototype.getAnimations = function getAnimationsPolyfill() {
       console.warn(
         [