{"id":14560,"library":"eslint-plugin-react-compiler","title":"ESLint Plugin for React Compiler","description":"The `eslint-plugin-react-compiler` is an ESLint plugin designed to integrate with the experimental React Compiler (internally known as React Forget). Its primary function is to surface and display errors, warnings, and suggestions generated by the compiler directly within the developer's integrated development environment (IDE) or during continuous integration (CI) builds. Currently at version `19.1.0-rc.2`, it operates as a release candidate, indicating active development and potential for API instability. The plugin is a critical tool for developers experimenting with the React Compiler, providing immediate feedback on compilation issues and guiding them towards code patterns compatible with automatic memoization and optimization. Given its close tie to an experimental React feature, its release cadence is likely irregular and directly linked to the React Compiler's own development milestones, focusing on correctness and performance improvements. It differentiates itself by being the official mechanism to lint against compiler-specific issues, a function not covered by generic ESLint rules or other React-specific ESLint plugins.","status":"active","version":"19.1.0-rc.2","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript","typescript"],"install":[{"cmd":"npm install eslint-plugin-react-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-compiler","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency to run any ESLint plugin.","package":"eslint","optional":false}],"imports":[{"note":"ESLint plugins are registered as strings within the `plugins` array in your ESLint configuration file (e.g., `.eslintrc.js`), not imported as modules into application code.","wrong":"const ReactCompiler = require('eslint-plugin-react-compiler'); // Incorrect usage in .eslintrc.js","symbol":"Plugin registration","correct":"plugins: ['react-compiler']"},{"note":"To utilize the plugin's predefined recommended ruleset, use the `plugin:` prefix followed by the plugin name and `/recommended` in the `extends` array.","wrong":"extends: ['react-compiler'] // Missing 'plugin:' prefix","symbol":"Recommended configuration","correct":"extends: ['plugin:react-compiler/recommended']"},{"note":"When configuring individual rules from a plugin, you must prefix the rule name with the plugin identifier (e.g., `react-compiler/`) to ensure it's correctly applied.","wrong":"rules: { 'no-expression-as-prop': 'error' } // Missing plugin name prefix","symbol":"Individual rule configuration","correct":"rules: { 'react-compiler/no-expression-as-prop': 'error' }"}],"quickstart":{"code":"module.exports = {\n  root: true,\n  env: {\n    browser: true,\n    es2020: true,\n    node: true\n  },\n  parserOptions: {\n    ecmaVersion: 'latest',\n    sourceType: 'module',\n    ecmaFeatures: {\n      jsx: true\n    }\n  },\n  settings: {\n    react: {\n      version: 'detect' // Automatically detect React version\n    }\n  },\n  extends: [\n    'eslint:recommended',\n    'plugin:react/recommended',\n    'plugin:react/jsx-runtime',\n    'plugin:react-compiler/recommended' // Enable recommended rules from the compiler plugin\n  ],\n  plugins: [\n    'react',\n    'react-compiler' // Register the plugin\n  ],\n  rules: {\n    // Example: Override or add specific rules if needed\n    // 'react-compiler/no-render-prop-expression': 'warn'\n  }\n};\n","lang":"javascript","description":"This configuration snippet demonstrates how to set up ESLint to utilize `eslint-plugin-react-compiler` within a React project. It includes the plugin in the `plugins` array and extends its recommended ruleset, allowing ESLint to detect and report errors, warnings, and suggestions generated by the experimental React Compiler directly in your development environment."},"warnings":[{"fix":"Always consult the latest official React Compiler and plugin documentation before upgrading. Pin the exact version in `package.json` to prevent unexpected breaking changes during automated updates.","message":"This plugin is currently at a Release Candidate (RC) stage (`19.1.0-rc.2`). This implies that its API, rules, and configuration options are subject to frequent changes without strict adherence to semantic versioning. Breaking changes are to be expected between minor and even patch versions.","severity":"breaking","affected_versions":">=19.1.0-rc.0"},{"fix":"Ensure your project is correctly configured to use the experimental React Compiler. Refer to the official React documentation for the React Compiler setup instructions, which may involve specific Babel or bundler configurations.","message":"The functionality of this ESLint plugin is directly tied to the experimental React Compiler. Incorrect or incomplete setup of the React Compiler itself in your project may lead to the ESLint plugin not reporting errors accurately or at all.","severity":"gotcha","affected_versions":">=19.1.0-rc.0"},{"fix":"Regularly review the plugin's documentation and release notes. Prioritize using the `recommended` configuration (`'plugin:react-compiler/recommended'`) to automatically keep up with best practices and rule changes, rather than hand-picking individual rules.","message":"Rule names and configurations within `eslint-plugin-react-compiler` are still in active development and may change or be removed as the React Compiler evolves. Relying on specific rule names or options without checking the latest documentation can lead to invalid ESLint configurations.","severity":"gotcha","affected_versions":">=19.1.0-rc.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm install eslint-plugin-react-compiler eslint --save-dev` or `yarn add eslint-plugin-react-compiler eslint --dev` to install the plugin and ESLint.","cause":"The `eslint-plugin-react-compiler` package is not installed or not accessible in the current project environment.","error":"Error: Failed to load plugin 'react-compiler' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-react-compiler'"},{"fix":"Double-check the rule name and its allowed options against the official `eslint-plugin-react-compiler` documentation. Ensure the rule actually exists and the severity/options are valid.","cause":"An ESLint rule specific to `eslint-plugin-react-compiler` has been configured incorrectly, either by referencing a non-existent rule or by using invalid options for an existing rule.","error":"ESLint: Configuration for rule 'react-compiler/some-non-existent-rule' is invalid: Value 'error' is not allowed."},{"fix":"Ensure the plugin is registered only once in your root ESLint configuration. If using layered configurations, verify that child configurations are not re-registering the plugin when it's already inherited from a parent config.","cause":"The `eslint-plugin-react-compiler` is being loaded multiple times from different locations or configurations, leading to conflicts.","error":"ESLint: 'react-compiler' was conflicted between ..."}],"ecosystem":"npm"}