'React' is defined but never used. (no-unused-vars) [duplicate] - reactjs

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"
]
}
}

Answer 1

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

Answer 2

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"
}

Answer 3

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.

Answer 4

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.

Answer 5

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$"
}
],

Answer 6

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.

Answer 7

you can do it in .eslintrc.js
"rules": {
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": "error"
}

Answer 8

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)

Answer 9

in eslintrc.js
adding following will solve the error
plugins: [
'react/recommended',
],
rules: {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error"
},

Answer 10

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"
}
},

Answer 11

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

Answer 12

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

Answer 13

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