adobe / adobe/react-spectrum

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

Open
#10,219 7 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.