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

オープン 初心者向け
  • 何か問題がありますか？
#1,801 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
88/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
nodejs, react, typescript
領域
build-system, testing

調査の方向性

まず packages/instrument-bundler/src/build.ts から始め、パッケージの規約について packages/instrument-bundler/AGENTS.md を読んでください。要求されたfixtureを src/__tests__/repositories/ に追加し、packages/instrument-bundler/src/__tests__/build.test.ts でReact 18のJSX解決と、Reactのメジャーバージョンが一致しない場合の拒否の両方をテストしてください。ビルドテストを実行し、両方のケースが成功すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
119
フォーク
19
平均マージ
5日 10時間
マージ済み PR（30日）
36

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

DouglasNeuroInformatics/OpenDataCapture のほかの issue

DouglasNeuroInformatics/OpenDataCapture の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。