Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#1,801 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
88/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nodejs, react, typescript
Ambito
build-system, testing

Direzione di ricerca

Inizia da packages/instrument-bundler/src/build.ts e leggi packages/instrument-bundler/AGENTS.md per conoscere le convenzioni del pacchetto. Aggiungi il fixture richiesto sotto src/__tests__/repositories/ e copri sia la risoluzione JSX di React 18 sia il rifiuto di versioni major di React non corrispondenti in packages/instrument-bundler/src/__tests__/build.test.ts. Esegui i test di build; il lavoro è completo quando entrambi i casi passano.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
119
Fork
19
Merge medio
1g 2h
PR unite (30g)
56

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DouglasNeuroInformatics/OpenDataCapture

Tutte le issue di DouglasNeuroInformatics/OpenDataCapture

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.