eslint complaining about unused React var

Question

I have a file that looks like this:

import React from 'react';
import PropTypes from 'prop-types';

const I18NLanguage = (props) => {
    const {code, i18n} = props;

    const languageMap = {
        'en': i18n.english,
        'es': i18n.spanish,
        'fr': i18n.french,
        'de': i18n.german,
        'pt': i18n.portuguese,
        'zh-Hans': i18n.simplifiedChinese,
        'zh-Hant': i18n.traditionalChinese,
        'ja': i18n.japanese
    }
    return (
        <>
            {languageMap[code]}
        </>
    )
};

I18NLanguage.propTypes = {
    code: PropTypes.string.isRequired,
    i18n: PropTypes.object.isRequired
};

export default I18NLanguage;

// const Input = ({ label, text, type, id, value, handleChange }) => (
//     <div className='form-group'>
//       <label htmlFor={label}>{text}</label>
//       <input
//         type={type}
//         className='form-control'
//         id={id}
//         value={value}
//         onChange={handleChange}
//         required
//       />
//     </div>
//   );

// Input.propTypes = {
//     label: PropTypes.string.isRequired,
//     text: PropTypes.object.isRequired,
//     type: PropTypes.string.isRequired,
//     id: PropTypes.element.isRequired,
//     value: PropTypes.element.isRequired,
//     handleChange: PropTypes.element.isRequired
// };

// export default Input;

When I run eslint, it complains with this error message:

1:8 error 'React' is defined but never used no-unused-vars

If I remove the import to react, it complains about missing the import. If I comment out everything in the code sample except the two imports, and uncomment the Input function and everything below it, it’s happy.

Any suggestions as to what may be wrong? My .eslintrc looks like this:

{
    "parser": "babel-eslint",
    "parserOptions": {
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "node": true
    },
    "plugins": [
      "react"
    ],
    "rules": {
      "react/display-name": ["error", { "ignoreTranspilerName": false }],
      "react/no-find-dom-node": [0],
      "no-console": [0]
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "settings": {
      "react": {
        "version": "16.4"
      }
    },
    "globals": {
    }
  }

Thank you for your time.

Matt Carlotta Matt Carlotta · Accepted Answer · 2018-12-04T18:07:56

It's because eslint doesn't recognize <> (Fragment) as JSX, while babel does.

Not sure if updating eslint will fix it, but you can try. Otherwise, just use <Fragment> or disable the line from being linted: import React from 'react'; /* eslint-disable-line no-unused-vars */

eslint complaining about unused React var

2 Answers