I have the error 'React' is defined but never used no-unused-vars for *.jsx files with jsx markup. Here is some of my environment:
1) package.json
"react": "^16.0.0"
"babel-eslint": "^8.0.1"
"eslint": "^4.8.0"
"eslint-config-airbnb": "^15.1.0" "eslint-import-resolver-webpack": "^0.8.3"
"eslint-loader": "^1.9.0"
"eslint-plugin-import": "^2.7.0"
"eslint-plugin-jsx-a11y": "^5.1.1"
"eslint-plugin-react": "^7.4.0"
2) .eslintrc.json
{
"env": {
"browser": true
},
"extends": [
"airbnb",
"plugin:react/recommended"
],
"parser": "babel-eslint",
"plugins": [
"import",
"react",
"jsx-a11y"
],
"rules": {
"comma-dangle": ["error", "never"],
"max-len": ["error", 120],
"no-unused-vars": ["error", { "args": "none" }],
"react/prop-types": "off"
},
"settings": {
"import/resolver": {
"webpack": {
"config": "config/webpack/development.js"
}
}
}
}
How can I fix it?
@ljharb I've just tried adding "react/jsx-uses-vars": "error" and "react/jsx-uses-react": "error" rules but it didn't work
hmm, assuming npm ls exits zero, that should work (and the recommended config should include those rules anyways)
Oh, sorry, my bad 鈽癸笍
I understood what's wrong. As I use React 0.16 I have some draft components like this:
import React from 'react';
const Foo = () => 'Foo';
export default Foo;
The error is quite logical. When I change markup to <div>Foo</div> all works fine
hi
'Router' is defined but never used no-unused-vars
'Route' is defined but never used no-unused-vars
'Link' is defined but never used no-unused-vars
'browserHistory' is defined but never used no-unused-vars
'IndexRoute' is defined but never used no-unused-vars
'About' is defined but never used no-unused-vars
getting errors please help me
Add this to your .eslintrc:
rules: {
'no-unused-vars': 0,
},
Most helpful comment
Oh, sorry, my bad 鈽癸笍
I understood what's wrong. As I use React 0.16 I have some draft components like this:
The error is quite logical. When I change markup to
<div>Foo</div>all works fine