ESLint Configuration for Create React App

Common errors

• ESLint: Configuration for rule "react/react-in-jsx-scope" is invalid

  cause This error typically occurs when using React 17's new JSX transform feature (`jsx: 'automatic'` in Babel/TypeScript) without disabling the corresponding ESLint rule that checks for explicit `import React from 'react'` in files using JSX.
  fix Add `"react/react-in-jsx-scope": "off"` and `"react/jsx-uses-react": "off"` to the `rules` section of your `.eslintrc.json` file. Ensure your Babel or TypeScript configuration is set to use the automatic JSX runtime.

• Error: Cannot find module 'eslint-config-react-app'

  cause The `eslint-config-react-app` package is not installed or ESLint cannot resolve its path.
  fix Run `npm install --save-dev eslint-config-react-app eslint` or `yarn add --dev eslint-config-react-app eslint` to install the package and its peer dependency. Verify your `.eslintrc` file correctly references `"extends": "react-app"`.

• error  'React' was used before it was defined (no-undef)

  cause This usually indicates an issue with `eslint-plugin-react` configuration not correctly recognizing the React global or the new JSX transform, particularly in older setups or after partial upgrades.
  fix Ensure `eslint-plugin-react` is correctly configured and that your `.eslintrc.json` extends `react-app`. If using React 17+ and the new JSX transform, ensure `"react/react-in-jsx-scope": "off"` and `"react/jsx-uses-react": "off"` rules are applied as described above.

Warnings

• breaking Version 5.0.0 introduced significant updates to underlying tools including webpack 5, Jest 27, ESLint 8, and PostCSS 8. Projects upgrading from `eslint-config-react-app` v4 (or earlier) to v5 and beyond will also need to ensure their `eslint` peer dependency is at least `^8.0.0` and that other tooling (e.g., `react-scripts`) is compatible.
  Fix: Ensure `eslint` is updated to a compatible version (e.g., `^8.0.0`) and that your `react-scripts` package is also updated to v5.0.0 or later to maintain full compatibility with the updated tooling chain.
• breaking Version 4.0.0 introduced support for Fast Refresh, React 17 (including the new JSX transform), and TypeScript 4. Upgrading to this version might require updates to your React and TypeScript versions to fully leverage or avoid compatibility issues with the new features and syntax.
  Fix: Update `react`, `react-dom` to `^17.0.0` (or newer) and `typescript` to `^4.0.0` (or newer) as appropriate for your project. Be aware of the new JSX transform, which changes how `React` needs to be imported for JSX.
• gotcha While `npm audit` might report vulnerabilities in underlying packages like `resolve-url-loader`, `webpack-dev-server`, or `terser-webpack-plugin`, several release notes explicitly state these vulnerabilities 'did not affect Create React App projects'. This is because CRA's specific usage patterns or included polyfills mitigate the reported issues.
  Fix: Review the specific vulnerability details and the `eslint-config-react-app` release notes. Often, these warnings can be safely ignored for Create React App projects if the project is up-to-date with `react-scripts` and `eslint-config-react-app` maintenance releases, as they typically include patches or mitigations. Avoid unnecessary manual dependency overrides which might introduce new issues.
• deprecated Create React App 5.0.1 and later templates use `createRoot` for React 18 compatibility. While `eslint-config-react-app` itself doesn't directly enforce this, older React setup patterns might produce linting warnings or runtime issues when used with React 18.
  Fix: For new React 18 projects, ensure your `index.js` uses `ReactDOM.createRoot().render()` instead of `ReactDOM.render()`. For existing projects, update your `react-scripts` to v5.0.1 or newer and adjust your `index.js` to use `createRoot` if migrating to React 18.

Install

• npm install eslint-config-react-app npm
• yarn add eslint-config-react-app yarn
• pnpm add eslint-config-react-app pnpm

Imports

• ESLint Configuration
  wrong:

  import config from 'eslint-config-react-app';

  correct:

  {
    "extends": "react-app"
  }

  eslint-config-react-app is an ESLint shareable configuration, not a JavaScript module. It is consumed via the `extends` property in an ESLint configuration file (e.g., .eslintrc.json or .eslintrc.js), not imported in source code. Do not use `require()` or `import` statements directly.
• ESLint Configuration with Jest
  wrong:

  {
    "extends": "react-app/jest"
  }

  correct:

  {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }

  To include Jest-specific linting rules, extend both 'react-app' and 'react-app/jest'. The Jest rules should typically be listed after the base 'react-app' config to ensure proper overriding or extension.

Quickstart

This quickstart shows how to configure ESLint to extend `eslint-config-react-app` in a `.eslintrc.json` file for a Create React App project, including Jest rules, and provides an example `package.json` with relevant dependencies and lint script.

/* .eslintrc.json */
{
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "rules": {
    // Override or add custom rules here if necessary
    // For example, to relax a rule:
    "no-unused-vars": "warn",
    // Or to enforce a rule:
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}

/* package.json (example dependencies) */
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "eslint": "^8.0.0",
    "eslint-config-react-app": "^7.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  }
}