eslint-plugin-react-debug

4.2.3 verified Sat Apr 25 auth: no javascript

An ESLint plugin that provides debugging-related rules for React, part of the eslint-react monorepo. Current stable version is 4.2.3, but the latest releases are beta versions (5.5.1-beta.0 as of April 2026). It requires ESLint ^10.0.0 and TypeScript, and Node.js >=22.0.0. The plugin ships TypeScript types and is designed to help debug React components, focusing on rules that catch common mistakes and anti-patterns during development. It differentiates from other React ESLint plugins by being specifically tailored for debugging scenarios within the eslint-react ecosystem.

Common errors

error Cannot find module 'eslint-plugin-react-debug' ↓

cause Missing dependency in package.json or incorrect import path.

fix

Run 'npm install eslint-plugin-react-debug --save-dev' or verify import path.

error Error: ESLint configuration in 'your-file' is invalid: "plugins" field must be an array or an object ↓

cause Using old ESLint flat config format incorrectly for plugins.

fix

Ensure plugins are provided as an object with plugin names as keys, e.g., 'plugins: { "react-debug": debugPlugin }'.

error TypeError: Cannot read properties of undefined (reading 'someRule') ↓

cause Rule name does not exist in the plugin.

fix

Check the available rules list in the plugin's documentation or refer to configurations.

Warnings

breaking Requires Node.js >=22.0.0 ↓

fix Update Node.js to version 22 or higher.

breaking Requires ESLint ^10.0.0 ↓

fix Update ESLint to version 10.0.0 or higher.

gotcha Plugin uses ESM only; CommonJS require() will fail. ↓

fix Use import statement instead of require().

deprecated The v5 beta series introduces breaking changes; stable v4 may be deprecated after v5 release. ↓

fix Migrate to v5 beta once stable or stay on v4.

Install

npm install eslint-plugin-react-debug

yarn add eslint-plugin-react-debug

pnpm add eslint-plugin-react-debug

Imports

default

wrong

const plugin = require('eslint-plugin-react-debug')

correct

import plugin from 'eslint-plugin-react-debug'

ESM-only; CJS require() fails in Node >=22 with default package type.

rules

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

Named export for rule definitions.

configs

wrong

import configs from 'eslint-plugin-react-debug/configs'

correct

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

Configurations are exported as named export, not a separate module.

Quickstart

Configures ESLint with eslint-plugin-react-debug and eslint-plugin-react-x, enabling debugging and React X rules for TypeScript/TSX files.

import debugPlugin from 'eslint-plugin-react-debug';
import reactPlugin from 'eslint-plugin-react-x';
import tsParser from '@typescript-eslint/parser';

export default [
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      'react-debug': debugPlugin,
      'react-x': reactPlugin,
    },
    rules: {
      'react-debug/rule-name': 'warn',
      'react-x/no-set-state': 'error',
    },
  },
];