eslint-plugin-react-naming-convention

4.2.3 verified Sat Apr 25 auth: no javascript

ESLint plugin providing naming convention rules for React components, hooks, and props. Current stable version 4.2.3, part of the @eslint-react monorepo. Requires ESLint ^10.0.0 and Node >=22.0.0. Ships TypeScript types. Differentiated by its decoupled preset from eslint-plugin-react-x, allowing standalone use without the full react-x plugin. Release cadence is high (multiple betas per month) with breaking changes in v5.x series. Supports custom rules like boolean prop naming. ESM-only, no CJS support.

Common errors

error Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node_modules/eslint-plugin-react-naming-convention/dist/index.js from /path/to/eslint.config.js not supported. ↓

cause Using CommonJS require() with ESM-only package

fix

Change to import statement: import reactNamingConvention from 'eslint-plugin-react-naming-convention' and ensure parent module is ESM.

error Error: Failed to load plugin 'react-naming-convention' declared in 'plugins': Cannot find module 'eslint-plugin-react-naming-convention' ↓

cause Plugin not installed or ESLint cannot resolve it

fix

Run npm install eslint-plugin-react-naming-convention --save-dev and verify node_modules path.

error Error: Rule 'react-naming-convention/component-name' is not loaded correctly. Check plugin configuration. ↓

cause Misnamed rule property or missing plugin in flat config

fix

Ensure plugin object is assigned under plugins key with correct prefix: plugins: { 'react-naming-convention': reactNamingConvention }

error TypeError: Cannot read properties of undefined (reading 'component-name') ↓

cause Direct access to rules without checking rule exists

fix

Access rules via import { rules } from 'eslint-plugin-react-naming-convention'; rules['component-name']

Warnings

breaking v5.x requires ESLint ^10.0.0 and Node >=22.0.0 ↓

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

deprecated v4.2.3 is the last v4.x; v5.x drops CJS support and renames presets ↓

fix Migrate to v5.x (currently beta) for continued updates. Switch to ESM imports.

gotcha Plugin is ESM-only; require() throws ERR_REQUIRE_ESM ↓

fix Use import syntax and ensure package.json has 'type': 'module' or use .mjs extension.

breaking v5.0.2-beta.0 removed pre-built identifier predicates (is.memo, is.lazy, etc.) from RuleToolkit ↓

fix Use the *Call variants (e.g., RuleToolkit.is.MemoCall) instead.

gotcha Peer dependency on TypeScript is required for any type-aware rules ↓

fix Install typescript in your project even if not using TS directly.

breaking v5.5.0-beta.0 removed component-hook-factories rule ↓

fix Remove rule from config; it was removed upstream.

Install

npm install eslint-plugin-react-naming-convention

yarn add eslint-plugin-react-naming-convention

pnpm add eslint-plugin-react-naming-convention

Imports

default (plugin)

wrong

const reactNamingConvention = require('eslint-plugin-react-naming-convention')

correct

import reactNamingConvention from 'eslint-plugin-react-naming-convention'

ESM-only; no CommonJS require supported. The default export is the plugin object containing rules and configs.

rules

wrong

import reactNamingConvention from 'eslint-plugin-react-naming-convention'; const { rules } = reactNamingConvention

correct

import { rules } from 'eslint-plugin-react-naming-convention'

Named export for direct rule access, e.g., rules['naming-convention/component-name'].

configs

wrong

import { config } from 'eslint-plugin-react-naming-convention'

correct

import { configs } from 'eslint-plugin-react-naming-convention'

Named export for preset configs like 'recommended'. Not 'config'.

Quickstart

Shows how to set up the plugin in flat ESLint config (v9+), enabling component-name and hook-name rules.

// eslint.config.js
import reactNamingConvention from 'eslint-plugin-react-naming-convention';

export default [
  {
    files: ['**/*.{ts,tsx,jsx}'],
    plugins: {
      'react-naming-convention': reactNamingConvention,
    },
    rules: {
      'react-naming-convention/component-name': ['warn', { allow: ['default'] }],
      'react-naming-convention/hook-name': 'error',
    },
  },
];