IT技术 - Create-React-App 编译失败 | 导入/第一个错误 - 吾爱随笔录

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

IT技术 reactjs import importerror create-react-app react-router-dom

2021-05-23 10:10:59

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

4个回答

这是因为您不小心将 React Router 安装到src文件夹中。因此 linter 认为这是您的代码并尝试对其进行验证。不要在里面安装第三方依赖src。

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

对我来说，这是一个案例，因为我违反了 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();之前打电话和分配import 'isomorphic-fetch';

进口申报不正确，我们需要遵循这样的程序

1）首先我们需要导入库

前任： import React from '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';

其它你可能感兴趣的问题

上一篇将 PETG 粘合到玻璃上下一篇3D 打印机校准测试 STL？