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();
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 .
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';
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/";
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';