"Import in body of module; reorder to top import/first" Across Many Files

Question

I have the same error as this answer, except instead of it just occurring in one file it is occurring in many; once I fix it for one file, another just pops up with the same error. I've seen this answer but whenever I run react-scripts start a node_modules folder is created in my src, so that solution isn't viable.

It would be too time consuming to have to fix every file that has this error every time I compile, so how can I get rid of this error? It seems to just be an eslint issue.

Answer 1

you will get this error if you have declared a variable in between your imports,

import React from 'react';
import axios from 'axios';

const URL = process.env.REACT_APP_API_BASE;

import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

declare variables after importing everything,

import React from 'react';
import axios from 'axios';
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

const URL = process.env.REACT_APP_API_BASE;

Answer 2

I found this issue while I was using React.lazy in my existing project. I got this error Failed to compile. :- Import in body of module; reorder to top import/first (with create-react-app).

import React from 'react';
import SelectField from '../inputs/SelectField';
const Questions = React.lazy(() => import('./questions'))
import _ from 'lodash';

Solution:-

Only reorder the position i.e. put all import on top then react.lazy.

import React from 'react';
import SelectField from '../inputs/SelectField';
import _ from 'lodash';
const Questions = React.lazy(() => import('./questions'))

Answer 3

I got this same error when I added an extra semicolon ';' at the end of an import statement.

I suggest removing any extraneous semicolons. This should make the error go away.