'Fragment' is defined but never used no-unused-vars warning with React app using ESLint

Question

I am fairly new to React and I've created a new app using the create-react-app tool and started to play around with it. When ever I run my app, I get following warning:

Compiled with warnings.

./src/index.js
  Line 1:  'Fragment' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

The following code is in my App.js :

import React, { Component, Fragment } from "react";
import Header from "./Layouts/Header";
import Footer from "./Layouts/Footer";

export default class extends Component {
  render() {
    return (
      <Fragment>
        <Header />
        <p>Hello World</p>
        <Footer />
      </Fragment>
    );
  }
}

Which is used like this in my index.js (main entry point):

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import registerServiceWorker from "./registerServiceWorker";
import App from "./Components/App";

ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();

And I have installed the react plugin for ESLint and this is the configuration I am using in my .eslintrc

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-uses-react": 2
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

Any ideas how to resolve this warning?

Answer 1

You have the line

import React, { Fragment } from "react";

in your index.js file, but you aren't using Fragment anywhere in that file. You can fix this by changing the import line to:

import React from "react";

Edit: Note the identical import in your App.js file is perfectly valid, as you are using Fragment in that file.