eslint-plugin-react-x

4.2.3 verified Sat Apr 25 auth: no javascript

A composable ESLint plugin for React libraries and frameworks, provided as part of the @eslint-react monorepo. Current stable version is 4.2.3, with active development on v5 beta releases (latest beta v5.5.1-beta.0). Requires Node >=22.0.0, ESLint ^10.0.0, and TypeScript as a peer dependency. Ships TypeScript types. Differentiators: covers modern React patterns (hooks, custom hooks, JSX), provides extensive rule set including new rules like `static-components` and `globals`, and aims to be a drop-in replacement for `eslint-plugin-react` with additional composability.

Common errors

error ESLint: Failed to load plugin 'react-x' ... Cannot find module 'eslint-plugin-react-x' ↓

cause Plugin is not installed or ESLint cannot resolve it in a monorepo or non-standard node_modules.

fix

Run npm install eslint-plugin-react-x --save-dev or ensure the plugin is in your root node_modules. Use require.resolve in ESLint config if needed.

error Parsing error: The keyword 'export' is reserved ↓

cause Using CommonJS `require()` to load the ESM-only plugin.

fix

Switch to ESM: add "type": "module" to your package.json and use import syntax in your ESLint config.

error Cannot read properties of undefined (reading 'rules') ↓

cause Incorrectly referencing config.rules without spreading the config object from the plugin.

fix

Use eslintPluginReactX.configs.recommended.rules instead of eslintPluginReactX.configs.recommended.rules if accessing manually, or spread the entire config.

error TypeError: (0 , eslintPluginReactX.default) is not a function ↓

cause Using default import incorrectly when plugin is not a function but an object.

fix

Use default import as import eslintPluginReactX from 'eslint-plugin-react-x' (the plugin is the default export) rather than calling it as a function.

Warnings

breaking Removal of `component-hook-factories` rule ↓

fix Remove any references to `react-x/component-hook-factories` from your ESLint config. This rule has been removed as the upstream equivalent was also removed.

deprecated Kit API Simplification: `initializedFromReact` and `initializedFromReactNative` renamed ↓

fix Replace `initializedFromReact` with `APIFromReact` and `initializedFromReactNative` with `APIFromReactNative`. Also, `is.memo()`, `is.lazy()`, etc. are removed in favor of `*Call` variants.

gotcha Requires Node >=22.0.0 and ESLint ^10.0.0 ↓

fix Upgrade Node to v22+ and ESLint to v10+. Use older versions of the plugin if you cannot upgrade (e.g., v3.x for ESLint 8/9).

gotcha CJS require() does not work; ESM-only package ↓

fix Use dynamic import (`import('eslint-plugin-react-x')`) or convert your project to ESM. Set `"type": "module"` in package.json.

gotcha Peer dependency on TypeScript — even if not using TypeScript, plugin may attempt type resolution ↓

fix Install TypeScript as a devDependency. If no TypeScript files exist, consider setting `tsconfigRootDir` in ESLint config to avoid unnecessary type checking overhead.

Install

npm install eslint-plugin-react-x

yarn add eslint-plugin-react-x

pnpm add eslint-plugin-react-x

Imports

default

wrong

const eslintPluginReactX = require('eslint-plugin-react-x')

correct

import eslintPluginReactX from 'eslint-plugin-react-x'

ESM-only; CJS require is not supported. Use dynamic import if needed.

rules

wrong

const { rules } = require('eslint-plugin-react-x')

correct

import { rules } from 'eslint-plugin-react-x'

Named export available; recommended for selective rule access in configs.

configs

wrong

const configs = require('eslint-plugin-react-x').configs

correct

import { configs } from 'eslint-plugin-react-x'

Configs include 'recommended', 'all', and framework-specific presets.

TSType
wrong
```
import { TSType } from 'eslint-plugin-react-x'
```
correct
```
import type { TSType } from 'eslint-plugin-react-x'
```
Type-only export; should be imported with `import type` to avoid runtime issues in TypeScript projects.
RuleContext
wrong
```
import type { RuleContext } from 'eslint-plugin-react-x'
```
correct
```
import { RuleContext } from 'eslint-plugin-react-x'
```
RuleContext is a type but also exported as a value for runtime checks in custom rules. Use `import type` only if purely for type usage.

Quickstart

Flat ESLint config using eslint-plugin-react-x with recommended rules and react-hooks plugin.

// eslint.config.js
import eslintPluginReactX from 'eslint-plugin-react-x';
import eslintPluginReactHooks from 'eslint-plugin-react-hooks';

export default [
  {
    files: ['**/*.{ts,tsx}'],
    plugins: {
      'react-x': eslintPluginReactX,
      'react-hooks': eslintPluginReactHooks,
    },
    rules: {
      ...eslintPluginReactX.configs.recommended.rules,
      'react-x/no-set-state': 'error',
      'react-x/no-string-refs': 'error',
      'react-x/jsx-no-duplicate-props': 'error',
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'warn',
    },
  },
];