Importing react-aria throws, 'inert' in HTMLElement.prototype when HTMLElement.prototype is undefined

[wigsnes]

Provide a general summary of the issue here

Importing react-aria during module evaluation throws:

TypeError: Cannot use 'in' operator to search for 'inert' in undefined
The failure comes from feature detection that uses 'inert' in HTMLElement.prototype when HTMLElement is defined but HTMLElement.prototype is undefined (so the in operator throws).

⨯ TypeError: Cannot use 'in' operator to search for 'inert' in undefined
at module evaluation (../../packages/ui/src/components/Selects2/Popover.tsx:3:1)
at module evaluation (../../packages/ui/src/components/DeviationLabel/DeviationTrigger.tsx:5:1)
at module evaluation (../../packages/ui/src/components/DeviationLabel/DeviationLabel.tsx:5:1)
at module evaluation (../../packages/ui/src/components/DeviationLabel/index.ts:1:1)
at module evaluation (../../packages/ui/src/components/index.ts:11:1)
at module evaluation (../../packages/ui/src/index.ts:1:1)
1 | import { useEffect, useRef } from 'react';
2 | import type { AriaPopoverProps } from 'react-aria';

3 | import { DismissButton, Overlay, usePopover } from 'react-aria';
| ^
4 | import type { OverlayTriggerState } from 'react-stately';
5 |
6 | import { useRegisterOverlayOpen } from '../../hooks/useRegisterOverlayOpen'; {
page: '/port/pick/next'
}

🤔 Expected Behavior?

Not to throw

😯 Current Behavior

Throws on compile

💁 Possible Solution

Guard HTMLElement.prototype so it is a non-null object before 'inert' in …, and optionally wrap in try/catch or defer detection to first use so imports never throw on the server.

🔦 Context

Next.js pages router

🖥️ Steps to Reproduce

Not sure

Version

3.49.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

not related to browser

What operating system are you using?

OSX

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[wigsnes]

Would love to know if this is something that just us are seeing, not finding any other issue related to this. We have had this issue for a month now. It usually happens when triggering a compile, or Next.js doing a big reload.

[snowystinger]

Seems like it should be fine, though might be worth checking if it could be considered a bug in Next. I'm not sure why HTMLElement would exist, but its prototype would be undefined. Otherwise, maybe adding a use client?

[wigsnes]

It probably is a bug in Turbo, but I wanted to flag it here because it seems to not get fixed with every new version that is coming out. I hoped that there was something react-aria team could do. I made AI create a patch fix, and that works, but not optimal.

We use pages router so there is no use client for this I think.

[snowystinger]

Gotcha, if it's a bug in Turbo, can you link it here as well?
I think this is still an ok fix to apply on our end if you'd like to open a PR?

[wigsnes]

I do not have a issue in Turbo I can point you to, I can look into creating a PR, but do not have time atm.

Will post this in Turbo issues list and see if they can help