web-dev-qa-db-fra.com

Echec de la compilation de Create-React-App | Import/Première erreur

J'utilise actuellement Create-React-App pour mon site personnel. Je continue à recevoir les erreurs suivantes chaque fois que je l'exécute:

./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 sens vraiment que je manque quelque chose de très petit mais j'ai du mal à le comprendre. J'ai essayé de rechercher dans Google le mot clé d'erreur 'import/first' et cela me porte à penser que c'est 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 pouvoir éliminer 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();
reactjsimportimporterrorcreate-react-appreact-router-dom
6
Catherine Monroe

En effet, vous avez accidentellement installé React Router dans le dossier src. Donc, linter pense que c’est votre code et essaie de le valider. N'installez pas de dépendances tierces dans 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 .

10
Dan Abramov

Pour moi, c'était un cas, parce que je violais Eslint import/first rule 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 j'appelais et assignais const store = configureStore(); avant import 'isomorphic-fetch';

4
Shota

La déclaration d'importation est incorrecte, nous devons suivre la procédure telle que 

1) il faut d'abord importer la bibliothèque 

ex: import React from 'react';

2) Puis déclarer toute variable ou constante 

ex: var apiBaseUrl = "http://localhost:4000/api/"; 

2
KARTHIKEYAN.A

Regardez attentivement votre code. J'ai vu ce message à partir d'une double typo ;.

      import React from 'react';
      import AppBar from '@material-ui/core/AppBar';
      import CircularProgress from '@material-ui/core/CircularProgress';;  <----- Mistake
      import Toolbar from '@material-ui/core/Toolbar';
      import IconButton from '@material-ui/core/IconButton';
0
str8up7od