React Aria Components collections crash: host and text nodes ignore the portal container's ownerDocument

Offen
  • Stimmt etwas nicht?
#163 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
49/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Start with src/dom/reconcile.ts: inspect node creation around lines 599 and 1004, then child reordering around line 477. Reproduce with the Vite configuration and Tabs example from the issue, comparing behavior with and without the Redact plugin. Done means the collection mounts without either reported crash; the issue notes that the second crash is not confirmed in the minimal reproduction.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Versions

  • @tanstack/redact 0.3.1
  • react and react-dom 19.3.1
  • react-aria-components 1.22.1 (react-aria 3.53.1)
  • vite 8.3.5, production build, Chromium

What happens

Any React Aria Components collection (Tabs here) crashes on mount and leaves the root empty:

Uncaught TypeError: Cannot set property previousSibling of #<Node> which has only a getter
    at appendChild (react-aria collections Document)

The same app built without the redact() plugin renders both tabs with no console errors.

Reproduction

// vite.config.ts
import { redact } from "@tanstack/redact/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({ plugins: [react(), redact()] })

// src/main.tsx
import { createRoot } from "react-dom/client"
import { Tab, TabList, TabPanel, Tabs } from "react-aria-components"

createRoot(document.getElementById("root")!).render(
  <Tabs>
    <TabList aria-label="Example">
      <Tab id="a">A</Tab>
      <Tab id="b">B</Tab>
    </TabList>
    <TabPanel id="a">Panel A</TabPanel>
    <TabPanel id="b">Panel B</TabPanel>
  </Tabs>,
)

Run vite build && vite preview and open the page.

Cause

React Aria builds its collections by calling createPortal(children, doc), where doc is its own fake Document (react-aria/dist/private/collections/Document.mjs). Its nodes have their own appendChild, insertBefore and ownerDocument.

This relies on the renderer creating nodes through the portal container's ownerDocument, as I understand React DOM does. Redact uses the global document:

  • src/dom/reconcile.ts:1004: createHostNode(type, isSvg), whose owner parameter defaults to document
  • src/dom/reconcile.ts:599: document.createTextNode(text)

A real DOM node then reaches the fake appendChild, which assigns child.previousSibling and throws, because that property is a getter on a real Node.

Possible fix, partly tested

Using the parent's owner document got past this crash when applied to dist/dom/reconcile.js in a larger app, using a build-time transform:

fiber.n = createHostNode(type, isSvg, domParent.ownerDocument || document)
fiber.n = (domParent.ownerDocument || document).createTextNode(text)

I only tried this as an experiment in that app, not against Redact's test suite.

Second crash after that fix

With the fix applied, the larger app's page using Tabs then threw this:

TypeError: r.compareDocumentPosition is not a function

The likely source is src/dom/reconcile.ts:477, which calls d.compareDocumentPosition(targetNext) while reordering children. I found no such method in a search of React Aria's Document.mjs. I haven't confirmed the call site or reproduced this crash in the minimal app.

Impact

We evaluated Redact for a TanStack Start dashboard built on React Aria Components. With Redact enabled:

  • 318 of 1231 unit and story tests failed; all pass on React.
  • No E2E test passed, because the sign-in flow failed for every role.

Not all of those story failures are confirmed to be this bug. The most common error was Cannot read properties of undefined (reading 'toLowerCase') (116 occurrences), which I haven't diagnosed, so it may be a separate issue.

Vorherrschende Sprache
TypeScript
Sterne
565
Forks
27
Ø Merge
10 Std. 27 Min.
Gemergte PRs (30 T.)
40

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/redact

Alle Issues in TanStack/redact

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.