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

我绝对觉得我错过了一些非常小的东西，但我很难搞清楚。我尝试使用Google搜索错误关键字'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();

Answer 1

这是因为您不小心将React Router安装到src文件夹中。所以linter认为它是你的代码并试图验证它。 请勿在{{1}}内安装第三方依赖项。

删除src并在应用的根文件夹中运行src/node_modules。如果缺少某个软件包，请在根文件夹中运行npm install，。

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

之前打电话并指定了import 'isomorphic-fetch';

Answer 3

导入声明不正确我们需要遵循这样的程序

1）首先我们需要导入库

ex：import React from 'react';

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

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

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

Answer 5

如果由于使用React.lazy延迟加载组件而在这里，则必须在所有React.lazy()行之前指定所有import语句。换句话说，在延迟加载的组件之后不能有任何import语句。

请参阅示例

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

Answer 6

在我的情况下，以下代码段出现此错误。修复之前：-

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

Answer 7

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

var moment = require('moment');

所有其他行均为导入。当我将需求移至末尾时，问题已解决。

Create-React-App无法编译|导入/第一个错误

7 个答案: