eslint-plugin-primer-react

8.6.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

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. ↓

cause Using CommonJS require() on an ESM-only package.

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

error ESLint configuration error: Cannot find module 'eslint-plugin-primer-react' ↓

cause Package not installed or incorrect version.

fix

Run 'npm install eslint-plugin-primer-react@latest --save-dev'

error Error: Rule 'primer-react/no-deprecated-components' is not configured. ↓

cause Rule not included in the plugins object or not added to rules.

fix

Ensure the plugin is in the 'plugins' key and the rule in 'rules'.

Warnings

breaking ESLint v9 support requires plugin version >=8.0.0; v7 and earlier are incompatible. ↓

fix Update to v8.0.0 or later and ensure ESLint ^9.0.0 is installed.

breaking Node.js version requirement is >=20 in v8.x; older Node versions may not work. ↓

fix Use Node.js 20 or newer.

deprecated The Octicon component is deprecated; use specific icon components instead. ↓

fix Replace Octicon imports with named icon imports like {IconCheck} from '@primer/octicons-react'.

gotcha ESM-only import; CommonJS require() will fail if not using dynamic import or if in a CJS context. ↓

fix Use import syntax or dynamic import() in CJS modules.

deprecated ReDoS vulnerability fixed in v8.5.2 for utils/casing-matches. ↓

fix Upgrade to v8.5.2 or later to mitigate the vulnerability.

Install

npm install eslint-plugin-primer-react

yarn add eslint-plugin-primer-react

pnpm add eslint-plugin-primer-react

Imports

default

wrong

const primerReact = require('eslint-plugin-primer-react')

correct

import primerReact from 'eslint-plugin-primer-react'

ESM-only; use import, not require.

rules

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

Access individual rules if needed.

configs
```
import { configs } from 'eslint-plugin-primer-react'
```
Use configs.recommended or configs.strict for preset rule sets.

RuleName

wrong

import { rule-name } from 'eslint-plugin-primer-react'

correct

import { rules } from 'eslint-plugin-primer-react'; const rule = rules['rule-name']

Rules are accessed via the rules object, not as named exports.

Quickstart

Basic ESLint configuration using eslint-plugin-primer-react with three common rules enabled.

// eslint.config.js
export default [
  {
    plugins: {
      primerReact: (await import('eslint-plugin-primer-react')).default
    },
    rules: {
      'primer-react/no-deprecated-components': 'error',
      'primer-react/no-unnecessary-components': 'warn',
      'primer-react/use-styled-react-import': 'error'
    }
  }
];