Create-React-App编译失败 | 导入/首个错误

Question

我目前在使用Create-React-App来制作个人网站。每次运行时都会出现以下错误：

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

- Catherine Monroe

Answer 1

这是因为您将React Router意外地安装到了src文件夹中。 因此，代码检查器认为它是您的代码并尝试验证它。不要在src内安装第三方依赖项。 在您的应用程序的根文件夹中删除src/node_modules并运行npm install。 如果缺少某些软件包，请在根文件夹中运行npm install --save <package-name>。

- Dan Abramov

Answer 2

对我来说，这是一个问题，因为我违反了Eslint的import/first规则，在任何其他导入之前调用了一个已导入的函数。

例如，这段代码存在问题：

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();之前，我已经导入了isomorphic-fetch

- Shota

Answer 3

导入声明不正确，我们需要按照以下流程操作：

1）首先需要导入库

例如：import React from 'react';

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

例如：var apiBaseUrl = "http://localhost:4000/api/";

- KARTHIKEYAN.A

---

对我来说，这只是在两个导入之间添加一个简单的 console.log()。XD - TOPKAT

Answer 4

仔细检查你的代码。我看到了一个双 ; 的错别字导致的错误信息。

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

- str8up7od

Answer 5

如果您使用 React.lazy 来懒加载组件，请在任何 React.lazy() 行之前指定所有导入语句。换句话说，不能在懒加载的组件后面有任何 import 语句。

请参考示例以了解顺序。

import Footer from "./components/Footer.js";
const Header = React.lazy(() => import("components/Header"));

- Collin Thomas

Answer 6

在我的情况下，我在下面的代码中遇到了这个错误。 修复前：-

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

花费一些时间后，我能够找到这个问题的根本原因。"所有import语句都应该放在模块的顶部。"

修复后：

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

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

- Mahesh K

Answer 7

我的问题是在第二行有这个：

var moment = require('moment');

所有其他行都是导入。当我将require移动到最后时，问题解决了。

- user3417479