Eslint-plugin-react: Error for unused variable when used in JSX

[thaggie]

I'm having trouble getting linting to work with my jsx files, it seems to think imports aren't used if they're only used in the JSX code.

I've made sample code below, the error I get is:

  4:8  error  'Test' is defined but never used  no-unused-vars

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

main.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import Test from './Test';

if (React.createElement) {
    ReactDOM.render(<div><Test/></div>, document.getElementById('example'));
}

Test.jsx

import React from 'react';

export default class Test extends React.Component {
    render() {
        return <span>Test</span>;
    }
}

package.json

{
  "name": "example",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "node_modules/eslint/bin/eslint.js . --ext jsx"
  },
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "eslint": "^2.2.0",
    "eslint-plugin-react": "^4.0.0"
  }
}

[thaggie]

OK, I've worked out that I need to used the recommended config for this to work, it took me the longest time to even see the recommended config part of the readme.

I've created a PR editing the readme file, I think it's important for people to see to get up and running quickly.

The rule that fixes this is:

"react/jsx-uses-vars": 2

[holyjak]

Thanks for the solution @thaggie , I run into the very same issue!
It is strange I need to enable a rule to get rid of errors :)

[yannickcr]

@jakubholynet This is due to the fact that ESLint rules do not apply to React/JSX syntax since they do not want to link their rules to a particular JavaScript library (and I can't blame them for that).

That's why you need to enable some rules in eslint-plugin-react (jsx-uses-react, jsx-uses-vars and react-in-jsx-scope) to have the good behavior with ESLint rules.

[mvolkmann]

Can I get more detail on the configuration needed in .eslintrc to get this to work? I think I've done everything recommended above, but I still get the "is defined but never used" error from ESLint for variables only used in JSX.

[ljharb]

@mvolkmann in "rules" in .eslintrc, have jsx-uses-react, jsx-uses-vars and react-in-jsx-scope all set to 2

[mvolkmann]

Thanks! I was editing the wrong .eslintrc file. This article shows all the required settings.
https://medium.com/@dan_abramov/lint-like-it-s-2015-6987d44c5b48#.3rxexe619

[stoplion]

1:1   error  Definition for rule 'jsx-uses-vars' was not found       jsx-uses-vars
1:1   error  Definition for rule 'jsx-uses-react' was not found      jsx-uses-react
1:1   error  Definition for rule 'react-in-jsx-scope' was not found  react-in-jsx-scope

in devDependencies...

"eslint": "3.2.2",
"eslint-plugin-react": "^6.0.0",

removed jsx-uses-react, jsx-uses-vars and react-in-jsx-scope

and it works now..

?

[ljharb]

@stoplion how are you running eslint? Typically this happens when you're running eslint on the command line or in an editor, and it's running the global eslint instead of a local one. You'll want to npm uninstall -g eslint just to be sure.