EsLint issue related to module order

Question

I got errors

Line 18: Import in body of module; reorder to top import/first

Line 19: Import in body of module; reorder to top import/first

Searching answer, as I understood this problem is related to order of imported modules, but I'm begginer, please help me to clearify, what exactly I should do with my code, because I tried to reorder, but nothing happend.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// Import Components
import Main from './components/Main';
import Single from './components/Single';
import PhotoGrid from './components/PhotoGrid';


// Import react router deps
import { Router, Route} from 'react-router-dom'
import { createBrowserHistory } from 'history';
const browserHistory = createBrowserHistory();

import { Provider } from 'react-redux';
import store, { history } from './store';


const router = (
<Provider store={store}>
    <Router history={ browserHistory }>
        <Route path='/' component={Main}>
            <Route exact component={PhotoGrid}></Route>
            <Route path="/view/:postId" component={Single}></Route>
        </Route>
    </Router>
</Provider>

 )

ReactDOM.render(router, document.getElementById('root'));
registerServiceWorker();

Answer 1

The message should also tell you to "search the keywords" for each lint error you see. If you search the import/first keyword, you will arrive at this description that explains the problem, and how to fix it.

In your case, you need to move out

const browserHistory = createBrowserHistory();

below all import statements.