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

Is this page useful?

في هذه الصفحة

  • Overview
  • Rule Details
  • Invalid
  • Valid
  • Troubleshooting
  • Configuration not working as expected

    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
Lints

config

Validates the compiler configuration options.

Rule Details

React Compiler accepts various configuration options to control its behavior. This rule validates that your configuration uses correct option names and value types, preventing silent failures from typos or incorrect settings.

Invalid

Examples of incorrect code for this rule:

// ❌ Unknown option name module.exports = { plugins: [ ['babel-plugin-react-compiler', { compileMode: 'all' // Typo: should be compilationMode }] ] }; // ❌ Invalid option value module.exports = { plugins: [ ['babel-plugin-react-compiler', { compilationMode: 'everything' // Invalid: use 'all' or 'infer' }] ] };

Valid

Examples of correct code for this rule:

// ✅ Valid compiler configuration module.exports = { plugins: [ ['babel-plugin-react-compiler', { compilationMode: 'infer', panicThreshold: 'critical_errors' }] ] };

Troubleshooting

Configuration not working as expected

Your compiler configuration might have typos or incorrect values:

// ❌ Wrong: Common configuration mistakes module.exports = { plugins: [ ['babel-plugin-react-compiler', { // Typo in option name compilationMod: 'all', // Wrong value type panicThreshold: true, // Unknown option optimizationLevel: 'max' }] ] };

Check the configuration documentation for valid options:

// ✅ Better: Valid configuration module.exports = { plugins: [ ['babel-plugin-react-compiler', { compilationMode: 'all', // or 'infer' panicThreshold: 'none', // or 'critical_errors', 'all_errors' // Only use documented options }] ] };

السابقcomponent-hook-factories
التاليerror-boundaries

Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
تعلم React
بداية سريعة
التثبيت
وصف واجهة المستخدم (UI)
إضافة التفاعلية
إدارة State
مخارج الطوارئ
مرجع API
React APIs
React DOM APIs
المجتمع
ميثاق السلوك
تعرف على الفريق
المساهمون في التوثيق
شكر وتقدير
المزيد
المدونة
React Native
الخصوصية
الشروط
// ❌ Unknown option name
module.exports = {
plugins: [
['babel-plugin-react-compiler', {
compileMode: 'all' // Typo: should be compilationMode
}]
]
};

// ❌ Invalid option value
module.exports = {
plugins: [
['babel-plugin-react-compiler', {
compilationMode: 'everything' // Invalid: use 'all' or 'infer'
}]
]
};
// ✅ Valid compiler configuration
module.exports = {
plugins: [
['babel-plugin-react-compiler', {
compilationMode: 'infer',
panicThreshold: 'critical_errors'
}]
]
};
// ❌ Wrong: Common configuration mistakes
module.exports = {
plugins: [
['babel-plugin-react-compiler', {
// Typo in option name
compilationMod: 'all',
// Wrong value type
panicThreshold: true,
// Unknown option
optimizationLevel: 'max'
}]
]
};
// ✅ Better: Valid configuration
module.exports = {
plugins: [
['babel-plugin-react-compiler', {
compilationMode: 'all', // or 'infer'
panicThreshold: 'none', // or 'critical_errors', 'all_errors'
// Only use documented options
}]
]
};