{"id":19880,"library":"eslint-plugin-primer-react","title":"eslint-plugin-primer-react","description":"ESLint plugin providing lint rules for Primer React components, currently at version 8.6.0. Requires ESLint ^9.0.0 and Node >=20. Actively maintained with frequent releases. Offers rules for enforcing best practices like using styled-react imports, no deprecated components, and preventing ReDoS vulnerabilities. Differentiates from generic React linting by being specific to Primer's design system.","status":"active","version":"8.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/primer/eslint-plugin-primer-react","tags":["javascript","eslint","eslintplugin"],"install":[{"cmd":"npm install eslint-plugin-primer-react","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-primer-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-primer-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for ESLint plugin","package":"eslint","optional":false}],"imports":[{"note":"ESM-only; use import, not require.","wrong":"const primerReact = require('eslint-plugin-primer-react')","symbol":"default","correct":"import primerReact from 'eslint-plugin-primer-react'"},{"note":"Access individual rules if needed.","symbol":"rules","correct":"import { rules } from 'eslint-plugin-primer-react'"},{"note":"Use configs.recommended or configs.strict for preset rule sets.","symbol":"configs","correct":"import { configs } from 'eslint-plugin-primer-react'"},{"note":"Rules are accessed via the rules object, not as named exports.","wrong":"import { rule-name } from 'eslint-plugin-primer-react'","symbol":"RuleName","correct":"import { rules } from 'eslint-plugin-primer-react'; const rule = rules['rule-name']"}],"quickstart":{"code":"// eslint.config.js\nexport default [\n  {\n    plugins: {\n      primerReact: (await import('eslint-plugin-primer-react')).default\n    },\n    rules: {\n      'primer-react/no-deprecated-components': 'error',\n      'primer-react/no-unnecessary-components': 'warn',\n      'primer-react/use-styled-react-import': 'error'\n    }\n  }\n];\n","lang":"javascript","description":"Basic ESLint configuration using eslint-plugin-primer-react with three common rules enabled."},"warnings":[{"fix":"Update to v8.0.0 or later and ensure ESLint ^9.0.0 is installed.","message":"ESLint v9 support requires plugin version >=8.0.0; v7 and earlier are incompatible.","severity":"breaking","affected_versions":"<8.0.0"},{"fix":"Use Node.js 20 or newer.","message":"Node.js version requirement is >=20 in v8.x; older Node versions may not work.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Replace Octicon imports with named icon imports like {IconCheck} from '@primer/octicons-react'.","message":"The Octicon component is deprecated; use specific icon components instead.","severity":"deprecated","affected_versions":">=8.6.0"},{"fix":"Use import syntax or dynamic import() in CJS modules.","message":"ESM-only import; CommonJS require() will fail if not using dynamic import or if in a CJS context.","severity":"gotcha","affected_versions":">=8.0.0"},{"fix":"Upgrade to v8.5.2 or later to mitigate the vulnerability.","message":"ReDoS vulnerability fixed in v8.5.2 for utils/casing-matches.","severity":"deprecated","affected_versions":"<8.5.2"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Change eslint.config.js to ESM (add 'type': 'module' in package.json) or use dynamic import: const primerReact = (await import('eslint-plugin-primer-react')).default","cause":"Using CommonJS require() on an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/node_modules/eslint-plugin-primer-react/index.js from /path/to/eslint.config.js not supported."},{"fix":"Run 'npm install eslint-plugin-primer-react@latest --save-dev'","cause":"Package not installed or incorrect version.","error":"ESLint configuration error: Cannot find module 'eslint-plugin-primer-react'"},{"fix":"Ensure the plugin is in the 'plugins' key and the rule in 'rules'.","cause":"Rule not included in the plugins object or not added to rules.","error":"Error: Rule 'primer-react/no-deprecated-components' is not configured."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}