ESLint with React gives `no-unused-vars` errors

Question

I've setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars errors for each React component.

I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?

Example:

app.js

import React, { Component } from 'react';
import Header from './header.js';

export default class App extends Component {
  render() {
    return (
      <div>
        <Header />
        {this.props.children}
      </div>
    );
  }
}

Linter Errors:

/my_project/src/components/app.js
  1:8  error  'React' is defined but never used   no-unused-vars
  2:8  error  'Header' is defined but never used  no-unused-vars

Here is my .eslintrc.json file:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

You're importing `React` while not using it, you're just using `Component`, which is correctly imported. — GMaiolo, Mar 01 '17 at 20:38
That makes sense - but why would `Header` also have the error? (You actually need to import React, otherwise when the JSX gets transpiled, it will give an error) — Don P, Mar 01 '17 at 20:42
This shouldn't be happening by now. What's your eslint version? https://github.com/eslint/eslint/issues/1905 — daniloprates, Mar 01 '17 at 20:51

score 274 · Accepted Answer · edited Jan 05 '21 at 06:18

274

First, install the following module npm install --save-dev eslint-plugin-react.

Then, in your .eslintrc.json, under extends, include the following plugin:

'extends': [
    'plugin:react/recommended'
]

Source

edited Jan 05 '21 at 06:18

snwfdhmp

360
2
11

answered Mar 01 '17 at 21:07

edwarddamato

3,130
1
11
8

2

Great answer.Of course you should do first (npm install --save-dev eslint-plugin-react) – skiabox Feb 29 '20 at 14:36
1

What about if your using airbnb? I tried adding 'plugin:react/recommended' before but it didn't work extends: [ "plugin:react/recommended", "airbnb", "airbnb/hooks", "plugin:react-redux/recommended", "plugin:prettier/recommended", "prettier/react", ], – jonny-harte May 15 '20 at 19:34
1

Here's the authoritative documentation ... https://github.com/yannickcr/eslint-plugin-react#recommended – Ken Lin May 26 '20 at 04:16
2

A quibble, if this is in a json file (`.eslintrc.json`), shouldn't those by double quotes? – Anomaly Sep 16 '21 at 16:12
1

I have my eslintrc extending `plugin:react/recommended`, but it still gives me this warning. I think it's because I'm using React in a file with a simple .js extension. When I give the file a .jsx extension, the warning goes away. – Doug Nov 27 '22 at 01:08

score 72 · Answer 2 · edited Feb 13 '20 at 09:58

72

To solve this only problem without adding new rules from react/recommended install eslint-plugin-react:

npm install eslint-plugin-react --save-dev

add in .eslintrc.js:

"plugins": ["react"]

and:

"rules": {   
     "react/jsx-uses-react": "error",   
     "react/jsx-uses-vars": "error" 
}

edited Feb 13 '20 at 09:58

Cerberus

8,879
1
25
40

answered Oct 18 '17 at 11:26

Mihey Mik

1,643
13
18

3

This isn't working for me, I'm still getting a warning from no-unused-vars – Anomaly Sep 16 '21 at 16:18
Works for me with VScode – BenRoe Nov 22 '21 at 15:55

fregante · Answer 3 · 2022-10-02T09:36:04.317

25

Quickest fix

To ignore all TitleCase variables, add this to your ESLint config:

{
    "rules": {
        "no-unused-vars": [
            "error",
            {
                "varsIgnorePattern": "React"
            }
        ]
    ]
}

Correct fix

Use eslint-plugin-react to ignore React variables.

npm install eslint-plugin-react -D

Add this to your ESLint config:

{
    "plugins": [
        "react"
    ],
    "rules": {
        "react/jsx-uses-vars": "error",
        "react/jsx-uses-react": "error"
    }
}

Suggested fix

Use eslint-plugin-react to improve your JSX usage, not just to silence this error.

npm install eslint-plugin-react -D

Add this to your ESLint config:

{
    "extends": [
        "plugin:react/recommended"
    ]
}

If you use XO, refer to eslint-config-xo-react.

edited Oct 02 '22 at 09:36

answered Apr 25 '20 at 10:08

fregante

29,050
14
119
159

2

If you want to use the `varsIgnorePattern` modifier you could simply just put `React` as the pattern. At least in my case, the issue was that I am importing React in every file and my linter is complaining if I use functional components etc. Someone more experienced than I am might be able to tell me if that could cause unanticipated issues. – Anthony Sep 30 '22 at 17:51
2

Good suggestion. I was thinking about ignoring all JSX components, but that's not necessary. – fregante Oct 02 '22 at 09:36

score 19 · Answer 4 · answered Apr 20 '17 at 23:22

19

Since I found this while googling, you should know that this simple rule is enough to prevent this message:

react/jsx-uses-react

The react/recommended set of rules adds many other rules you may not want.

answered Apr 20 '17 at 23:22

Fiaxhs

191
3

score 14 · Answer 5 · answered Apr 11 '18 at 18:57

In my case I needed to add in your .eslintrc.js:

'extends': [
    'plugin:react/recommended'
]

plus a specific tweaking to rid of preact import: import { h } from 'preact' but you can use this example to get rid of your specific warnings like so:

    "no-unused-vars": [
        "error",
        {
            "varsIgnorePattern": "^h$"
        }
    ],

score 5 · Answer 6 · answered Jun 07 '22 at 18:06

2022

If you're using ESLint with more configurations, be careful about the order of extends property array.

{
    extends: [
        'eslint:recommended',
        'plugin:react/jsx-runtime',
        'plugin:react/recommended',
        'plugin:prettier/recommended',
        'prettier',
      ],
      plugins: ['react'],

   //...
}

For example, make sure that you place 'plugin:react/recommended' after any other react configuration. Place 'react' as a plugin as well, and if you're using prettier make sure that you're following a proper configuration.

This helped me resolve the unused React var eslint issue.I moved 'plugin:react/jsx-runtime' before 'plugin:react/recommended' as suggested and issue got resolved. Thank you. — Viral Butani, Oct 09 '22 at 11:48

score 0 · Answer 7 · answered Sep 21 '22 at 09:52

0

you can do it in .eslintrc.js

"rules": {   
 "react/jsx-uses-react": 2,   
 "react/jsx-uses-vars": "error" 
}

answered Sep 21 '22 at 09:52

MagicHacker

1

score -1 · Answer 8 · answered May 23 '21 at 13:36

-1

I have the same error as well as I started to learn React yesterday. The terminal show the error and it is pretty straightforward to ignore the unused variable error.

Error from the terminal:

Line 5:17:  'setBlog' is assigned a value but never used  no-unused-vars
Search for the keywords to learn more about each warning.

Just add // eslint-disable-next-line this line before the variable which you have the error of unused variable. Like,

// eslint-disable-next-line
const [blogs, setBlog] = useState(... my code)

answered May 23 '21 at 13:36

Kopi Bryant

1,300
1
15
30

1

This doesn't solve the problem either. It just hides it from you. From my perspective it does not look like a solution to the problem – BonisTech Oct 11 '21 at 09:58
This is an awful "solution" – Barris Jan 29 '22 at 22:25

score -1 · Answer 9 · answered Nov 20 '21 at 16:33

-1

in eslintrc.js adding following will solve the error

  plugins: [
    'react/recommended',
  ],

  rules: {
    "react/jsx-uses-react": "error",   
     "react/jsx-uses-vars": "error" 
  },

answered Nov 20 '21 at 16:33

abhish

243
4
8

score -1 · Answer 10 · answered Jan 31 '22 at 10:35

1st install npm 
npm install --save-dev eslint-plugin-react

In Package.json replace eslintConfig declaration

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "plugin":"react/recommended",
    "rules": {
      "react/jsx-uses-react": "error",   
       "react/jsx-uses-vars": "error" 
    }
  },

score -2 · Answer 11 · answered Apr 30 '20 at 06:10

If you create the project throught create-react-app CLI,You can npm run eject,and edit the package.json "eslintConfig" field,like this:

`"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "eqeqeq": "off",
      "no-unused-vars": "off",
    }
  },`

the eslint will be closed

score -2 · Answer 12 · answered Apr 17 '21 at 17:15

-2

if you are using Create-react-app, there is no need to install anything or Eject, the simple solution is:

since the no-unused-vars-errors is thrown from webpackHotDevClient.js, you just need to go to /node_modules/react-scripts/config/webpack.config.dev.js. on "new ESLintPlugin" rules just add :

'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'no-unused-vars': 0

answered Apr 17 '21 at 17:15

tokochi

308
3
7

Even if this is the approach `eslint-plugin-react` [uses](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md), the best way to "fix" these eslint warnings when using react is actually using the react plugin, or other warnings will arise sooner or later. – Nicolas Hevia Oct 11 '21 at 21:18

Ruman · Answer 13 · 2021-07-24T05:16:11.360

-5

According to Official Docs of Eslint have you tried this

/* eslint no-unused-vars : "off" */

add this line as it is inside anywhere in your code. Hopefully you warning may go away and it may help you

edited Jul 24 '21 at 05:16

answered Jul 01 '21 at 05:30

Ruman

936
11
9

2

I don't think this is the right approach. It doesn't solve the answer, it just hides it.. – BonisTech Oct 11 '21 at 09:57
Even if this is the approach `eslint-plugin-react` [uses](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md), the best way to "fix" these eslint warnings when using react is actually using the react plugin, or other warnings will arise sooner or later. – Nicolas Hevia Oct 11 '21 at 21:15

ESLint with React gives `no-unused-vars` errors

13 Answers13

Quickest fix

Correct fix

Suggested fix

Linked

Related