Reactjs Create React应用程序未能编译|导入/第一个错误

我目前正在为我的个人网站使用Create React应用程序。每次运行时，我都会遇到以下错误：

./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

我确实觉得我错过了一些非常小的东西，但我很难弄清楚。我试着用谷歌搜索错误关键字“import/first”，这让我觉得这是一个ESLint问题。如果您发现我的进口订单有任何问题，请告诉我。我试过不同的进口订单，但似乎没有什么能消除这个错误

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

从“React”导入React；
从“react dom”导入react dom；
从“历史”导入{createBrowserHistory}；
从“react Router dom”导入{Router，Route，Redirect，Switch}；
导入“./index.css”；
从“/App.js”导入应用程序；
从“/Home.js”导入Home；
从“/About.js”导入About；
从“/Contact.js”导入联系人；
从“/404.js”导入NotFound；
从“./registerServiceWorker”导入registerServiceWorker；
const history=createBrowserHistory（）；
ReactDOM.render(
,
document.getElementById（'root'））
);
registerServiceWorker（）；

这是因为您不小心将React Router安装到了

src

文件夹中。所以linter认为这是你的代码，并试图验证它不要在

src

中安装第三方依赖项

---

删除

src/node_模块

并在应用程序的根文件夹中运行

npm install

。如果某个软件包丢失，请运行

npm install--save

，并将其保存在根文件夹中。对我来说，这是一种情况，因为我在任何其他导入之前调用导入的函数违反了Eslint规则

例如，此代码有一个问题：

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

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

---

因为我正在调用并分配

const store=configureStore（）导入“同构提取”之前
进口声明不正确，我们需要遵循以下程序

1） 首先，我们需要导入库

例如：
从“React”导入React

2） 然后声明任何变量或常量

例如：
var apiBaseUrl=”http://localhost:4000/api/";
仔细查看您的代码。我从一个双重的
中看到了这条消息打字错误

      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';


从“React”导入React；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/CircularProgress”导入CircularProgress 在我的例子中，我在下面的代码中得到了这个错误。
修复前：-

import axios from 'axios';
export const GET_TODO = 'GET TODO';
export const SAVE_TODO = 'SAVE TODO';
import { devConstants } from 'src/appConstants';

在花了一些时间之后，我找到了原因。“所有导入语句都应该位于模块的顶部。”

修复后：-

import axios from 'axios';
import { devConstants } from 'src/appConstants';

export const GET_TODO = 'GET TODO';
export const SAVE_TODO = 'SAVE TODO';

我的问题是今天晚上我在第二条线上

var moment = require('moment');

其他所有的线路都是进口的。当我将require移到末尾时，问题得到了解决。
如果您在这里是因为使用
React.lazy
延迟加载组件，则必须在任何
React.lazy（）
行之前指定所有导入语句。另一种说法是，在惰性加载组件之后，不能有任何
import
语句

有关订单，请参见示例

从“/components/Footer.js”导入页脚；
const Header=React.lazy（（）=>import（“组件/头”）；
对我来说，它是两个导入XD之间的一个简单的
console.log（）