[英]Create-React-App failed to compile | Import/First Error
I'm currently using Create-React-App for my personal site.我目前正在为我的个人网站使用 Create-React-App。 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
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.
我尝试在谷歌上搜索错误关键字“import/first”,这让我认为这是一个 ESLint 问题。 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();
This is because you accidentally installed React Router into src
folder.这是因为您不小心将 React Router 安装到
src
文件夹中。 So the linter thinks it's your code and tries to validate it.所以 linter 认为这是你的代码并尝试验证它。 Don't install third party dependencies inside
src
.不要在
src
安装第三方依赖项。
Delete src/node_modules
and run npm install
in the root folder of your app.删除
src/node_modules
并在应用程序的根文件夹中运行npm install
。 If some package is missing, run npm install --save <package-name>
, also in the root folder .如果缺少某个包,请运行
npm install --save <package-name>
,也在根文件夹中。
For me, it was a case, because I was violating Eslint import/first rule, by calling an imported function before any other import.对我来说,这是一个案例,因为我违反了 Eslint 导入/第一规则,在任何其他导入之前调用导入的函数。
For example, this code had a problem:例如,这段代码有一个问题:
import configureStore from './redux/common/configureStore';
const store = configureStore();
// Add polyfill for fetch for older browsers
import 'isomorphic-fetch';
require('es6-promise').polyfill();
because I was calling and assigning const store = configureStore();
因为我正在调用和分配
const store = configureStore();
before import 'isomorphic-fetch';
在
import 'isomorphic-fetch';
The import declaration is incorrect we need to follow the procedure such进口申报不正确,我们需要遵循这样的程序
1) first we need to import library 1)首先我们需要导入库
ex: import React from 'react';
例如:
import React from 'react';
2) Then declare any variable or constants 2) 然后声明任何变量或常量
ex: var apiBaseUrl = "http://localhost:4000/api/";
例如:
var apiBaseUrl = "http://localhost:4000/api/";
Look closely at your code.仔细看看你的代码。 I saw this message from a double
;
我从一个双人那里看到了这条消息
;
typo.错字。
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';
If you're here because you were using React.lazy
to lazy load a component, you must specify all your import statements before any React.lazy()
lines.如果你在这里是因为你使用
React.lazy
来延迟加载一个组件,你必须在任何React.lazy()
行之前指定所有导入语句。 Another way of saying this is, you cannot have any import
statements after your lazy loaded components.另一种说法是,在延迟加载的组件之后不能有任何
import
语句。
See example for order查看订单示例
import Footer from "./components/Footer.js";
const Header = React.lazy(() => import("components/Header"));
In my case, I got this error for the below piece of code.就我而言,我收到以下代码的错误。 Before fix:-
修复前:-
import axios from 'axios';
export const GET_TODO = 'GET TODO';
export const SAVE_TODO = 'SAVE TODO';
import { devConstants } from 'src/appConstants';
After spending some time on this, I am able to find cause for this." all import statements should be at the top of the module ,"在花了一些时间之后,我能够找到原因。“所有导入语句都应该在模块的顶部,”
After fix:-修复后:-
import axios from 'axios';
import { devConstants } from 'src/appConstants';
export const GET_TODO = 'GET TODO';
export const SAVE_TODO = 'SAVE TODO';
My problem was that I had at the second line this我的问题是我在第二行有这个
var moment = require('moment');
All the other lines were imports.所有其他线路都是进口的。 When I moved the require to the end, problem fixed.
当我将要求移到最后时,问题解决了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.