Create-React-App无法编译|导入/第一个错误 [英] Create-React-App failed to compile | Import/First Error

问题描述

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

I'm currently using Create-React-App for my personal site. I keep getting the following errors every time I run it:

./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问题。如果您在我的导入订单中发现任何问题，请告诉我。我尝试了不同的导入订单，但似乎没有什么可以摆脱错误。

I definitely feel like I'm missing something super small but I'm having trouble figuring it out. I tried Googling the error keyword 'import/first' and it's leading me to think it's an ESLint issue. Please let me know if you see any problem in my import order. I've tried different import orders, but nothing seems to get rid of the error.

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 Router安装到 src 文件夹。所以linter认为它是你的代码并尝试验证它。 不要在 src 中安装第三方依赖项。

This is because you accidentally installed React Router into src folder. So the linter thinks it’s your code and tries to validate it. Don’t install third party dependencies inside src.

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

Delete src/node_modules and run npm install in the root folder of your app. If some package is missing, run npm install --save <package-name>, also in the root folder.

这篇关于Create-React-App无法编译|导入/第一个错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！