'React' is defined but never used no-unused-vars

[VanessaChu]

When i run eslint on my code, I get the error: 'React' is defined but never used no-unused-vars when I remove import 'React' from 'react' I get the error 'React' must be in scope when using JSX

I tried enabling the rules below but still receive the error. "react/jsx-uses-react": 1, "react/jsx-uses-vars": 1, "react/react-in-jsx-scope": 1

Can someone help me check if my configurations are correct, if I'm not overriding anything?

{
  "parser": "babel-eslint",
  "extends": [
    "eslint:recommended",
    "airbnb",
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "babel",
    "react",
    "flowtype"
  ],
  "rules": {
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/react-in-jsx-scope": 1,
  
    // Indent with 4 spaces
    "indent": [
      "error",
      4
    ],
    // Indent JSX with 4 spaces
    "react/jsx-indent": [
      "error",
      4
    ],
    // Indent props with 4 spaces
    "react/jsx-indent-props": [
      "error",
      4
    ],
    // TODO: Remove all of these exceptions
    // We have code that violates each one of these rules.
    // We should fix the style then remove the rules when we can.
    "consistent-return": "off",
    "flowtype/no-types-missing-file-annotation": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "import/no-named-as-default": "off",
    "import/no-named-as-default-member": "off",
    "import/prefer-default-export": "off",
    "react/default-props-match-prop-types": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-closing-tag-location": "off",
    "react/jsx-filename-extension": "off",
    "react/no-string-refs": "off",
    "react/no-unused-prop-types": "off",
    "react/no-unused-state": "off",
    "react/prefer-stateless-function": "off",
    "react/prop-types": "off",
    "react/require-default-props": "off",
    "react/sort-comp": "off",
    "max-len": "off",
    "no-case-declarations": "off",
    "no-console": "off",
    "no-mixed-operators": "off",
    "no-nested-ternary": "off",
    "no-shadow": "off",
    "no-use-before-define": "off",
    "no-underscore-dangle": "off",
    "no-unused-expressions": "off",
    "prefer-promise-reject-errors": "off"
  },
  "env": {
    "jest": true
  },
  "globals": {
    "fetch": false,
    "Response": false,
    "React": true
  }
}

I am using these versions in package.json: devDependencies

      "eslint-config-airbnb": "16.1.0",
      "eslint-plugin-babel": "^5.1.0",
      "eslint-plugin-flowtype": "^2.46.1",
      "eslint-plugin-react": "^7.9.1",

dependencies

  "react": "16.0.0",
  "react-native": "0.50.4",

[ljharb]

I'd include the explicit import, and remove it as a global from your "globals" configuration.

[VanessaChu]

I have included the explicit import and removing it as global did not change anything

[ljharb]

Can you share the contents of the file it's erroring on, and the exact error message on the CLI, complete with line number?

[totsteps]

@ljharb I have the same issue.

JSX File:

/** @jsx jsx */     // <- required by @emotion/core
import React from "react";  // error
import { Link } from "gatsby";
import Helmet from "react-helmet";
import { css, jsx } from "@emotion/core";

const Header = () => (
  <div
    css={css`
      background: rebeccapurple;
      margin-bottom: 1.45rem;
    `}>
    <div
      css={css`
        margin: 0 auto;
        max-width: 960px;
        padding: 1.45rem 1.0875rem;
      `}>
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          css={css`
            color: white;
            text-decoration: none;
          `}>
          Gatsby
        </Link>
      </h1>
    </div>
  </div>
);

const TemplateWrapper = ({ children }) => (
  <>
    <Helmet
      title="Blog"
      meta={[
        { name: "description", content: "Sample" },
        { name: "keywords", content: "sample, something" }
      ]}
    />
    <Header />
    <div
      css={css`
        margin: 0 auto;
        max-width: 960px;
        padding: 0px 1.0875rem 1.45rem;
        padding-top: 0px;
      `}>
      {children}
    </div>
  </>
);

export default TemplateWrapper;

CLI output:

▶ [blog/blog] (master ⁚ ✘!?) (⬢ v10.16.0) yarn lint      
yarn run v1.17.0
$ eslint ./src --ignore-path .gitignore

/Users/gagan/scratch/blog/blog/src/layouts/index.js
   2:8   error  'React' is defined but never used  no-unused-vars

ESLint config

{
  "root": true,
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "plugins": ["react", "react-hooks", "jsx-a11y", "import"],
  "extends": [
    "airbnb",
    "eslint:recommended",
    "plugin:prettier/recommended",
    "prettier/react",
    "prettier/standard",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
//    "no-unused-vars": ["warn"],
    "prettier/prettier": ["error", {"singleQuote": false}],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,
    "react/react-in-jsx-scope": 2,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/display-name": 0,
    "react/prop-types": [0, { "ignore": ["children"] }],
    "jsx-a11y/anchor-is-valid": 0
  }
}

IDE: WebStorm Package.json:

"dependencies": {
    "@emotion/core": "^10.0.14",
    "@emotion/styled": "^10.0.14",
    "gatsby": "^2.11.7",
    "gatsby-plugin-emotion": "^4.1.0",
    "gatsby-plugin-react-helmet": "^3.1.0",
    "gatsby-remark-prismjs": "^3.3.0",
    "prismjs": "^1.16.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.0"
  },
  "devDependencies": {
    "eslint": "^6.0.1",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.0",
    "eslint-plugin-react": "^7.14.2",
    "eslint-plugin-react-hooks": "^1.6.1",
    "husky": "^3.0.0",
    "lint-staged": "^9.0.0",
    "prettier": "^1.18.2",
    "prettier-eslint-cli": "^5.0.0"
  },

[totsteps]

Seems like /** @jsx jsx */ is causing the error. Error no longer appears after removing it.

I think this can be closed unless @VanessaChu haven't resolved the issue.

[ljharb]

indeed; when that comment is present, you don't need the React import and can/should delete it.

[justingrant]

@ljharb @gagan0723 -

indeed; when that comment is present, you don't need the React import and can/should delete it.

I believe that this statement is incorrect, at least when using emotion 10. See https://github.com/yannickcr/eslint-plugin-react/issues/2156#issuecomment-554844831 and https://github.com/emotion-js/emotion/issues/1549

[jamesjenkinsdmno]

Any chance there is an update on this?

[ljharb]

https://github.com/yannickcr/eslint-plugin-react/issues/2156#issuecomment-680642027

[The-Code-Monkey]

As of react 17 you dont need to import react at the top of the file, ive just done this and if you are using typescript you just need to add jsx: "react-jsx" into compiler options and disable this rule.

[ljharb]

@The-Code-Monkey the proper way to handle this is explained here: https://github.com/jsx-eslint/eslint-plugin-react#configuration

If you are using the new JSX transform from React 17, extend react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends") to disable the relevant rules.

[ljharb]

Closing per https://github.com/jsx-eslint/eslint-plugin-react/issues/2080#issuecomment-507813363; please file a new issue if anyone's still having trouble.