logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

في هذه الصفحة

  • Overview
  • Reference
  • target
  • Usage
  • Targeting React 19 (default)
  • Targeting React 17 or 18
  • Troubleshooting
  • Runtime errors about missing compiler runtime
  • Runtime package not working
  • Checking compiled output

    react@19.2

  • نظرة عامة
  • Hooks
    • useActionState
    • useCallback
    • useContext
    • useDebugValue
    • useDeferredValue
    • useEffect
    • useEffectEvent
    • useId
    • useImperativeHandle
    • useInsertionEffect
    • useLayoutEffect
    • useMemo
    • useOptimistic
    • useReducer
    • useRef
    • useState
    • useSyncExternalStore
    • useTransition
  • المكونات
    • <Fragment> (<>)
    • <Profiler>
    • <StrictMode>
    • <Suspense>
    • <Activity>
    • <ViewTransition> - This feature is available in the latest Canary version of React
  • APIs
    • act
    • addTransitionType - This feature is available in the latest Canary version of React
    • cache
    • cacheSignal
    • captureOwnerStack
    • createContext
    • lazy
    • memo
    • startTransition
    • use
    • experimental_taintObjectReference - This feature is available in the latest Experimental version of React
    • experimental_taintUniqueValue - This feature is available in the latest Experimental version of React
  • react-dom@19.2

  • Hooks
    • useFormStatus
  • المكونات (Components)
    • Common (e.g. <div>)
    • <form>
    • <input>
    • <option>
    • <progress>
    • <select>
    • <textarea>
    • <link>
    • <meta>
    • <script>
    • <style>
    • <title>
  • APIs
    • createPortal
    • flushSync
    • preconnect
    • prefetchDNS
    • preinit
    • preinitModule
    • preload
    • preloadModule
  • Client APIs
    • createRoot
    • hydrateRoot
  • Server APIs
    • renderToPipeableStream
    • renderToReadableStream
    • renderToStaticMarkup
    • renderToString
    • resume
    • resumeToPipeableStream
  • Static APIs
    • prerender
    • prerenderToNodeStream
    • resumeAndPrerender
    • resumeAndPrerenderToNodeStream
  • React Compiler

  • الإعدادات (Configuration)
    • compilationMode
    • gating
    • logger
    • panicThreshold
    • target
  • Directives
    • "use memo"
    • "use no memo"
  • تصريف المكتبات (Compiling Libraries)
  • React DevTools

  • React Performance tracks
  • eslint-plugin-react-hooks

  • Lints
    • exhaustive-deps
    • rules-of-hooks
    • component-hook-factories
    • config
    • error-boundaries
    • gating
    • globals
    • immutability
    • incompatible-library
    • preserve-manual-memoization
    • purity
    • refs
    • set-state-in-effect
    • set-state-in-render
    • static-components
    • unsupported-syntax
    • use-memo
  • قواعد React (Rules of React)

  • نظرة عامة (Overview)
    • Components و Hooks يجب أن تكون Pure
    • React تستدعي Components و Hooks
    • قواعد Hooks
  • React Server Components

  • Server Components
  • Server Functions
  • Directives
    • 'use client'
    • 'use server'
  • Legacy APIs

  • Legacy React APIs
    • Children
    • cloneElement
    • Component
    • createElement
    • createRef
    • forwardRef
    • isValidElement
    • PureComponent
مرجع API
الإعدادات (Configuration)

target

The target option specifies which React version the compiler should generate code for.

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

  • Reference
    • target
  • Usage
    • Targeting React 19 (default)
    • Targeting React 17 or 18
  • Troubleshooting
    • Runtime errors about missing compiler runtime
    • Runtime package not working
    • Checking compiled output

Reference

target

Configures the React version compatibility for the compiled output.

Type

'17' | '18' | '19'

Default value

'19'

Valid values

  • '19': Target React 19 (default). No additional runtime required.
  • '18': Target React 18. Requires react-compiler-runtime package.
  • '17': Target React 17. Requires react-compiler-runtime package.

Caveats

  • Always use string values, not numbers (e.g., '17' not 17)
  • Don’t include patch versions (e.g., use '18' not '18.2.0')
  • React 19 includes built-in compiler runtime APIs
  • React 17 and 18 require installing react-compiler-runtime@latest

Usage

Targeting React 19 (default)

For React 19, no special configuration is needed:

{ // defaults to target: '19' }

The compiler will use React 19’s built-in runtime APIs:

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

Targeting React 17 or 18

For React 17 and React 18 projects, you need two steps:

  1. Install the runtime package:

npm install react-compiler-runtime@latest

  1. Configure the target:

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

The compiler will use the polyfill runtime for both versions:

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


Troubleshooting

Runtime errors about missing compiler runtime

If you see errors like “Cannot find module ‘react/compiler-runtime’“:

  1. Check your React version:

    npm why react

  2. If using React 17 or 18, install the runtime:

    npm install react-compiler-runtime@latest

  3. Ensure your target matches your React version:

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

Runtime package not working

Ensure the runtime package is:

  1. Installed in your project (not globally)
  2. Listed in your package.json dependencies
  3. The correct version (@latest tag)
  4. Not in devDependencies (it’s needed at runtime)

Checking compiled output

To verify the correct runtime is being used, note the different import (react/compiler-runtime for builtin, react-compiler-runtime standalone package for 17/18):

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

السابقpanicThreshold
التاليDirectives

Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
تعلم React
بداية سريعة
التثبيت
وصف واجهة المستخدم (UI)
إضافة التفاعلية
إدارة State
مخارج الطوارئ
مرجع API
React APIs
React DOM APIs
المجتمع
ميثاق السلوك
تعرف على الفريق
المساهمون في التوثيق
شكر وتقدير
المزيد
المدونة
React Native
الخصوصية
الشروط
{
target: '19' // or '18', '17'
}
'17' | '18' | '19'
{
// defaults to target: '19'
}
// Compiled output uses React 19's native APIs
import { c as _c } from 'react/compiler-runtime';
npm install react-compiler-runtime@latest
// For React 18
{
target: '18'
}

// For React 17
{
target: '17'
}
// Compiled output uses the polyfill
import { c as _c } from 'react-compiler-runtime';
npm why react
npm install react-compiler-runtime@latest
{
target: '18' // Must match your React major version
}
// For React 19 (built-in runtime)
import { c } from 'react/compiler-runtime'
// ^

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