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

Posted 2023-02-22

【中文标题】Create-React-App 编译失败 |导入/第一个错误

【英文标题】：Create-React-App failed to compile | Import/First Error

【发布时间】：2018-01-17 22:28:36

【问题描述】：

我目前正在为我的个人网站使用 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();

【参考方案1】：

这是因为你不小心将 React Router 安装到了src 文件夹中。所以 linter 认为它是 你的 代码并尝试验证它。 不要在 src 中安装第三方依赖项。

删除src/node_modules 并在应用的根文件夹中运行npm install。如果缺少某些包，请运行npm install --save <package-name>，也在根文件夹中。

【参考方案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();

因为我在import 'isomorphic-fetch';之前调用并分配了const store = configureStore();

【参考方案3】：

import 声明不正确，我们需要按照这样的程序进行

1) 首先我们需要导入库

例如：import React from 'react';

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

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

【讨论】：

对我来说这是两个导入之间的简单console.log() XD

【参考方案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';

【参考方案5】：

如果您在这里是因为您使用 React.lazy 延迟加载组件，则必须在任何 React.lazy() 行之前指定所有导入语句。另一种说法是，在延迟加载的组件之后不能有任何 import 语句。

查看订单示例

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

【参考方案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';

【参考方案7】：

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

var moment = require('moment');

所有其他行都是进口的。当我将要求移到最后时，问题已解决。