{"id":19901,"library":"eslint-plugin-react-naming-convention","title":"eslint-plugin-react-naming-convention","description":"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.","status":"active","version":"4.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/Rel1cx/eslint-react","tags":["javascript","react","naming-convention","eslint","eslint-react","eslint-plugin","eslint-plugin-react-naming-convention","typescript"],"install":[{"cmd":"npm install eslint-plugin-react-naming-convention","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-react-naming-convention","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-react-naming-convention","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required to run ESLint plugin","package":"eslint","optional":false},{"reason":"peer dependency needed for type-aware rules","package":"typescript","optional":true}],"imports":[{"note":"ESM-only; no CommonJS require supported. The default export is the plugin object containing rules and configs.","wrong":"const reactNamingConvention = require('eslint-plugin-react-naming-convention')","symbol":"default (plugin)","correct":"import reactNamingConvention from 'eslint-plugin-react-naming-convention'"},{"note":"Named export for direct rule access, e.g., rules['naming-convention/component-name'].","wrong":"import reactNamingConvention from 'eslint-plugin-react-naming-convention'; const { rules } = reactNamingConvention","symbol":"rules","correct":"import { rules } from 'eslint-plugin-react-naming-convention'"},{"note":"Named export for preset configs like 'recommended'. Not 'config'.","wrong":"import { config } from 'eslint-plugin-react-naming-convention'","symbol":"configs","correct":"import { configs } from 'eslint-plugin-react-naming-convention'"}],"quickstart":{"code":"// eslint.config.js\nimport reactNamingConvention from 'eslint-plugin-react-naming-convention';\n\nexport default [\n  {\n    files: ['**/*.{ts,tsx,jsx}'],\n    plugins: {\n      'react-naming-convention': reactNamingConvention,\n    },\n    rules: {\n      'react-naming-convention/component-name': ['warn', { allow: ['default'] }],\n      'react-naming-convention/hook-name': 'error',\n    },\n  },\n];","lang":"typescript","description":"Shows how to set up the plugin in flat ESLint config (v9+), enabling component-name and hook-name rules."},"warnings":[{"fix":"Upgrade ESLint to ^10.0.0 and Node to >=22.0.0.","message":"v5.x requires ESLint ^10.0.0 and Node >=22.0.0","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Migrate to v5.x (currently beta) for continued updates. Switch to ESM imports.","message":"v4.2.3 is the last v4.x; v5.x drops CJS support and renames presets","severity":"deprecated","affected_versions":"4.x"},{"fix":"Use import syntax and ensure package.json has 'type': 'module' or use .mjs extension.","message":"Plugin is ESM-only; require() throws ERR_REQUIRE_ESM","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Use the *Call variants (e.g., RuleToolkit.is.MemoCall) instead.","message":"v5.0.2-beta.0 removed pre-built identifier predicates (is.memo, is.lazy, etc.) from RuleToolkit","severity":"breaking","affected_versions":">=5.0.2-beta.0"},{"fix":"Install typescript in your project even if not using TS directly.","message":"Peer dependency on TypeScript is required for any type-aware rules","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Remove rule from config; it was removed upstream.","message":"v5.5.0-beta.0 removed component-hook-factories rule","severity":"breaking","affected_versions":">=5.5.0-beta.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change to import statement: import reactNamingConvention from 'eslint-plugin-react-naming-convention' and ensure parent module is ESM.","cause":"Using CommonJS require() with ESM-only package","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."},{"fix":"Run npm install eslint-plugin-react-naming-convention --save-dev and verify node_modules path.","cause":"Plugin not installed or ESLint cannot resolve it","error":"Error: Failed to load plugin 'react-naming-convention' declared in 'plugins': Cannot find module 'eslint-plugin-react-naming-convention'"},{"fix":"Ensure plugin object is assigned under plugins key with correct prefix: plugins: { 'react-naming-convention': reactNamingConvention }","cause":"Misnamed rule property or missing plugin in flat config","error":"Error: Rule 'react-naming-convention/component-name' is not loaded correctly. Check plugin configuration."},{"fix":"Access rules via import { rules } from 'eslint-plugin-react-naming-convention'; rules['component-name']","cause":"Direct access to rules without checking rule exists","error":"TypeError: Cannot read properties of undefined (reading 'component-name')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}