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

3576 views reactjs
4

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?

answered question

1 Answer

8

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.

posted this

Have an answer?

JD

Please login first before posting an answer.