eslint-plugin-react-jsx

4.2.3 verified Sat Apr 25 auth: no javascript

An ESLint plugin for React JSX rules, part of the eslint-react monorepo. The current stable version is v4.2.3, requiring Node.js >=22.0.0 and ESLint ^10.0.0 with TypeScript. It provides fine-grained control over JSX syntax and patterns beyond what eslint-plugin-react offers, with strong TypeScript support and custom rule examples. Note: the project has moved to v5.x beta releases with breaking changes – stick to v4.x for stability.

Common errors

error Error: Cannot find module 'eslint-plugin-react-jsx' ↓

cause Package not installed or not in node_modules.

fix

Run npm install eslint-plugin-react-jsx --save-dev.

error TypeError: plugin is not a function ↓

cause Using CJS `require()` with ESM-only package.

fix

Use import plugin from 'eslint-plugin-react-jsx' or const plugin = (await import('eslint-plugin-react-jsx')).default.

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

cause ESLint is not configured for ES modules.

fix

Set "type": "module" in package.json or use .mjs extension for config file.

Warnings

breaking v5.x drops support for Node <22.0.0 and ESLint <10.0.0. ↓

fix Upgrade Node to >=22.0.0 and ESLint to ^10.0.0.

deprecated Rule `component-hook-factories` removed in v5.5.0-beta.0. ↓

fix Remove the rule from your config; use eslint-plugin-react-hooks equivalent instead.

gotcha ESM-only package – CJS require() throws in Node >=22 with ESM resolution. ↓

fix Use `import()` or ensure your project is ESM.

gotcha Some rules (e.g., `no-unstable-nested-components`) require type checking and fail silently if TypeScript is not installed or configured. ↓

fix Install TypeScript as a peer dependency and enable linting with `parserOptions.project`.

Install

npm install eslint-plugin-react-jsx

yarn add eslint-plugin-react-jsx

pnpm add eslint-plugin-react-jsx

Imports

default

wrong

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

correct

import plugin from 'eslint-plugin-react-jsx'

ESM-only; CJS require() fails in Node >=22. Use dynamic import() if needed.

rules

wrong

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

correct

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

Named export for accessing individual rule definitions.

configs

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

Exported config presets like 'recommended'.

Quickstart

Flat ESLint config using the plugin with two recommended JSX rules.

import plugin from 'eslint-plugin-react-jsx';

export default [
  {
    plugins: {
      'react-jsx': plugin,
    },
    rules: {
      'react-jsx/no-unstable-nested-components': 'error',
      'react-jsx/no-leaked-conditional-rendering': 'warn',
    },
  },
];