«Фрагмент» определен, но никогда не использовал предупреждение no-unused-vars с приложением React, использующим ESLint

Question

Я довольно новичок в React, и я создал новое приложение, используя инструмент create-react-app, и начал с ним работать.Когда я запускаю свое приложение, я получаю следующее предупреждение:

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.

Следующий код находится в моем 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>
    );
  }
}

, который используется какэто в моем index.js (главная точка входа):

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();

И я установил плагин реагирования для ESLint, и это конфигурация, которую я использую в моем .eslintrc

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

Есть идеи, как решить это предупреждение?

Answer 1

В вашем файле index.js есть строка

import React, { Fragment } from "react";

, но вы нигде не используете Fragment в этом файле.Вы можете исправить это, изменив строку импорта на:

import React from "react";

Редактировать: Обратите внимание, что идентичный import в вашем файле App.js совершенно действителен, так как вы , используя Fragment в этом файле.