Create-React-App failed to compile | Import/First Error

user_8436594 0
Viewed 16378

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

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-dom create-react-app reactjs importerror import
7 Answers

The import declaration is incorrect we need to follow the procedure such

1) first we need to import library

ex: import React from 'react';

2) Then declare any variable or constants

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

user_46527060

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

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. Another way of saying this is, you cannot have any import statements after your lazy loaded components.

See example for order

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

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

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.

user_34174790
Related