Importing react-aria throws, 'inert' in HTMLElement.prototype when HTMLElement.prototype is undefined
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### 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_
Contributor guide
Research direction
Start with packages/ui/src/components/Selects2/Popover.tsx and trace the imported react-aria feature detection that checks HTMLElement.prototype. Reproduce the Next.js pages-router import with HTMLElement defined but its prototype undefined, then verify that module evaluation no longer throws in that environment.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100