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

Abierto
  • ¿Algo no está bien?
#163 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
49/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
537
Forks
22
Merge medio
10 h 27 min
PR fusionados (30 d)
40

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/redact

Todos los issues de TanStack/redact

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.