Impossible de compiler Create-React-App | Importer/Première erreur

Question

J'utilise Create-React-App pour mon site personnel. Je continue à obtenir les erreurs suivantes à chaque fois que je le lance:

./src/~/react-router-dom/es/index.js 
Line 3: Import in body of module; reorder to top import/first 
Line 5: Import in body of module; reorder to top import/first 
Line 7: Import in body of module; reorder to top import/first 
Line 9: Import in body of module; reorder to top import/first 
Line 11: Import in body of module; reorder to top import/first 
Line 13: Import in body of module; reorder to top import/first 
Line 15: Import in body of module; reorder to top import/first 
Line 17: Import in body of module; reorder to top import/first 
Line 19: Import in body of module; reorder to top import/first 
Line 21: Import in body of module; reorder to top import/first 
Line 23: Import in body of module; reorder to top import/first 
Line 25: Import in body of module; reorder to top import/first 

Je me sens vraiment comme si je manque quelque chose de super petit mais je vais avoir du mal à le découvrir. J'ai essayé de googler le mot-clé d'erreur 'import/first' et cela m'a amené à penser qu'il s'agit d'un problème ESLint. S'il vous plaît laissez-moi savoir si vous voyez un problème dans ma commande d'importation. J'ai essayé différentes commandes d'importation, mais rien ne semble se débarrasser de l'erreur.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createBrowserHistory } from 'history'; 
import { Router, Route, Redirect, Switch } from 'react-router-dom'; 
import './index.css'; 
import App from './App.js'; 
import Home from './home.js'; 
import About from './about.js'; 
import Contact from './contact.js'; 
import NotFound from './404.js'; 

import registerServiceWorker from './registerServiceWorker'; 

const history = createBrowserHistory(); 

ReactDOM.render(
    <Router history={history}> 
     <App> 
      <Switch> 
       <Route exact path="/" component= {Home} /> 
       <Route path="/about" component= {About} /> 
       <Route path="/contact" component= {Contact} /> 
       <Route path="/404" component= {NotFound} /> 
       <Redirect to= "/404" /> 
      </Switch> 
     </App> 
    </Router>, 
    document.getElementById('root') 
); 
registerServiceWorker(); 

Answer 1

C'est parce que vous réagissez accidentellement installé routeur dans le dossier src. Donc le linter pense que c'est votre code et essaie de le valider. N'installez pas de dépendances tierces à l'intérieur de src.

Supprimez src/node_modules et exécutez npm install dans le dossier racine de votre application. Si un paquet est manquant, exécutez npm install --save <package-name>, également dans le dossier racine.

Answer 2

Pour moi, c'était un cas, car je violais la règle Eslint import/first, en appelant une fonction importée avant toute autre importation.

Par exemple, ce code avait un problème:

import configureStore from './redux/common/configureStore'; 
const store = configureStore(); 

// Add polyfill for fetch for older browsers 
import 'isomorphic-fetch'; 
require('es6-promise').polyfill(); 

parce que je l'appelais et l'affectation const store = configureStore(); avant import 'isomorphic-fetch';