A React 18 instrument that imports only [email protected] has its JSX compiled against React 19 and fails to render

Abierto Apto para principiantes
  • ¿Algo no está bien?
#1,801 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
88/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
nodejs, react, typescript
Área
build-system, testing

Línea de trabajo

Empieza por packages/instrument-bundler/src/build.ts y lee packages/instrument-bundler/AGENTS.md para conocer las convenciones del paquete. Añade el fixture solicitado en src/__tests__/repositories/ y cubre tanto la resolución de JSX de React 18 como el rechazo de versiones principales de React incompatibles en packages/instrument-bundler/src/__tests__/build.test.ts. Ejecuta las pruebas de compilación; el trabajo estará terminado cuando pasen ambos casos.

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

Descripción

Area: Instruments Bug Difficulty: Low Priority: Low

A React 18 interactive instrument gets React 19's JSX runtime whenever it does not import [email protected] itself. resolveJsxImportSource decides which React the JSX compiles against by scanning the source for /runtime/v1/react@<version> only. An instrument that renders with /runtime/v1/[email protected]/client and uses JSX does not need to import [email protected]: the automatic JSX runtime makes the import unnecessary for any component without hooks. So it falls through to the [email protected] default. React 19's JSX runtime stamps elements with Symbol.for('react.transitional.element'), which React 18's reconciler rejects. The task then fails at render with "Objects are not valid as a React child", which is exactly the failure this derivation exists to prevent (packages/instrument-bundler/AGENTS.md). For the same reason, a source that imports [email protected] and [email protected] is not flagged as mixing majors.

Where

packages/instrument-bundler/src/build.ts:14-38:

const DEFAULT_REACT_PACKAGE = '[email protected]';

const REACT_PACKAGE_PATTERN = /['"]\/runtime\/v1\/(react@[^'"/]+)/g;
// ...
  return `/runtime/v1/${packages.values().next().value ?? DEFAULT_REACT_PACKAGE}`;

Reproduce

  1. Bundle an interactive instrument whose index.tsx imports only createRoot from /runtime/v1/[email protected]/client.js, declares const App = () => <p>hi</p>;, and calls createRoot(document.body).render(<App />) in render.
  2. Open it in apps/web.

Actual: the bundle imports /runtime/v1/[email protected]/jsx-runtime.js next to /runtime/v1/[email protected]/client.js (verified on main), and rendering fails with React 18's "Objects are not valid as a React child" error.
Expected: the JSX compiles against /runtime/v1/[email protected], and a source that imports react-dom of one major with react of another is a build error.

Tests

packages/instrument-bundler/src/__tests__/build.test.ts: it('should compile JSX against the react paired with an imported react-dom, so a react-dom 18 instrument without hooks still renders'). Add a fixture under src/__tests__/repositories/ (as the package's AGENTS.md asks) that imports only [email protected]/client. Also add it('should reject react-dom and react of different majors in one instrument').

e2e: none needed beyond the fixture, since no built-in instrument uses React 18.

Suggested fix

Match both packages, /['"]\/runtime\/v1\/react(?:-dom)?@([^'"/]+)/g, collect the version, and build react@<version> from it. The existing "more than one version" error then also covers a mismatched react/react-dom pair.

Lenguaje dominante
TypeScript
Estrellas
119
Forks
19
Merge medio
5 d 10 h
PR fusionados (30 d)
36

Preparar el entorno

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 DouglasNeuroInformatics/OpenDataCapture

Todos los issues de DouglasNeuroInformatics/OpenDataCapture

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.