target オプションは、コンパイラがどの React バージョン向けにコードを生成するか指定します。

{
target: '19' // or '18', '17'
}

リファレンス

target

コンパイル出力の React バージョンの互換性を設定します。

Type

'17' | '18' | '19'

デフォルト値

'19'

有効な値

  • '19':React 19 が対象(デフォルト)。追加のランタイムパッケージは不要です。
  • '18':React 18 が対象。react-compiler-runtime パッケージが必要です。
  • '17':React 17 が対象。react-compiler-runtime パッケージが必要です。

注意点

  • 数値ではなく文字列値を使用してください。(例: 17 ではなく '17' です)
  • パッチバージョンを含めないでください。(例: '18.2.0'ではなく'18' です)
  • React 19 にはビルトインのコンパイラランタイム API が含まれます。
  • React 17 と 18 では react-compiler-runtime@latest のインストールが必要です。

使用方法

React 19 が対象の場合(デフォルト)

React 19 では特別な設定は不要です。

{
// defaults to target: '19'
}

コンパイラは React 19 のビルトインランタイム API を使用します。

// Compiled output uses React 19's native APIs
import { c as _c } from 'react/compiler-runtime';

React 17 または 18 が対象の場合

React 17 と React 18 のプロジェクトでは、2 つのステップが必要です。

  1. ランタイムパッケージをインストールします。
npm install react-compiler-runtime@latest
  1. 対象を設定します。
// For React 18
{
target: '18'
}

// For React 17
{
target: '17'
}

コンパイラは両バージョンでポリフィルランタイムを使用します。

// Compiled output uses the polyfill
import { c as _c } from 'react-compiler-runtime';

トラブルシューティング

コンパイラのランタイムが不足していることに関するランタイムエラー

“Cannot find module ‘react/compiler-runtime’” のようなエラーが表示される場合

  1. React バージョンを確認してください。

    npm why react
  2. React 17 または 18 を使用している場合は、ランタイムをインストールしてください。

    npm install react-compiler-runtime@latest
  3. ターゲットが React バージョンと一致していることを確認してください。

    {
    target: '18' // Must match your React major version
    }

ランタイムパッケージが動作しない場合

ランタイムパッケージが以下を満たしていることを確認してください。

  1. プロジェクト内にインストールされていること。(グローバルではないこと)
  2. package.json の依存関係に記載されていること。
  3. 正しいバージョンであること。(@latest タグ)
  4. devDependencies に含まれていないこと。(ランタイムで必要です)

コンパイル済み出力の確認

正しいランタイムが使用されていることを確認するには、異なるインポートに注目してください。(組み込み版は react/compiler-runtime、React 17/18 のスタンドアロンパッケージ版では react-compiler-runtime

// For React 19 (built-in runtime)
import { c } from 'react/compiler-runtime'
// ^

// For React 17/18 (polyfill runtime)
import { c } from 'react-compiler-runtime'
// ^