Solution for import in body of module reorder to top năm 2024

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.

Related Solutions

Javascript – Importing lodash into angular2 + typescript application

Here is how to do this as of Typescript 2.0: (tsd and typings are being deprecated in favor of the following):

$ npm install --save lodash
# This is the new bit here: 
$ npm install --save-dev @types/lodash

Then, in your .ts file:

Either:

import * as _ from "lodash";

Or (as suggested by @Naitik):

import _ from "lodash";

I'm not positive what the difference is. We use and prefer the first syntax. However, some report that the first syntax doesn't work for them, and someone else has commented that the latter syntax is incompatible with lazy loaded webpack modules. YMMV.

Edit on Feb 27th, 2017:

According to @Koert below, import * as _ from "lodash"; is the only working syntax as of Typescript 2.2.1, lodash 4.17.4, and @types/lodash 4.14.53. He says that the other suggested import syntax gives the error "has no default export".

Javascript – The create-react-app imports restriction outside of src directory

This is special restriction added by developers of create-react-app. It is implemented in ModuleScopePlugin to ensure files reside in src/. That plugin ensures that relative imports from app's source directory don't reach outside of it.

There is no official way to disable this feature except using eject and modify webpack config.

But, most features and its updates are hidden into the internals of create-react-app system. If you make eject you will have no more new features and its update. So if you are not ready to manage and configure application included to configure webpack and so on - do not do eject operation.

Play by the existing rules - move assets to src or use based on

import * as _ from "lodash";

0 folder url without import.

However instead of eject there are much unofficial solutions, based on rewire which allows you to programmatically modify the webpack config without eject. But removing the ModuleScopePlugin plugin is not good - this loses some protection and does not adds some features available in

import * as _ from "lodash";

4. ModuleScopePlugin is designed to support multiple folders.

The better way is to add fully working additional directories similar to

import * as _ from "lodash";

4 also protected by ModuleScopePlugin. This can be done using react-app-rewire-alias

Anyway do not import from

import * as _ from "lodash";

0 folder - that will be duplicated in the

import * as _ from "lodash";

9 folder and will be available by two different url (and with different ways to load), which ultimately worsen the package download size.

Importing from the

import * as _ from "lodash";

4 folder is preferable and has advantages. Everything will be packed by webpack to the bundle with chunks optimal size and for best loading efficiency.

When you are writing a react component with ES6 javascript, You used to get the following error. and this tutorial covers a solution to fix this error.

Import in the body of module; reorder to top import/first created a React component with a styled-components library

written a code inside a component

It gives an error in the console and the component is not compiled due to the eslinter configured.

In React or javascript Class components, All the imports should declare first before the variable or any object declaration.

The above code contains import statements is placed after a component before the styled component declaration.

The ESLint error "Import in body of module reorder to top eslint import/first" occurs when you declare a variable in between your imports, at the top of your file.

To resolve the issue, move the variable declaration below your import statements.

Here is an example of how the error occurs.

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // ⛔️ Import in body of module; reorder to top. eslint import/first import axios from 'axios';

Notice that the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

3 variable is declared between the two import statements.

One way to resolve the issue is to move the variable declaration below the second import statement.

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

ESLint expects that all of your import statements are placed at the top of the file at the top level (not in a nested block, e.g. an

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

4 statement).

Your variable declarations have to come after the import statements.

I've also written a detailed guide on how to conditionally import ES6 modules in JavaScript.

Disabling the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 ESLint rule for a single line

In some cases, however, you might not be able to move the variable declaration below the import statement.

This may happen if you need to initialize some code before the module is imported.

You can use a comment if you need to disable the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 ESLint rule for a single line.

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

Note that the comment has to be placed above every import that comes after the variable declaration.

Disabling the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 ESLint rule for a block of code

If you have many imports that come after the variable declaration, it is better to disable the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 ESLint rule for a block of code.

Copied!

import React from 'react'; / eslint-disable import/first / const ENVIRONMENT = process.env.NODE_ENV; import axios from 'axios'; import {useState} from 'react'

The comment disables the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 rule for the entire file.

Make sure to place it above the import statements that come after the variable declaration.

You can also reenable the rule after the last import but that isn't necessary.

Copied!

import React from 'react'; / eslint-disable import/first / const ENVIRONMENT = process.env.NODE_ENV; import axios from 'axios'; import {useState} from 'react' / eslint-enable import/first /

The error also occurs when using the

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

0 method

The error also occurs if you use the

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

1 method above an

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

2 statement.

Copied!

import React from 'react'; const articles = React.lazy(() => import('./articles')) // ⛔️ Import in body of module; reorder to top. eslint import/first import axios from 'axios';

As the code sample shows, we have to declare a variable to which we assign the output of calling

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

1, so the variable has to be moved below the last import statement.

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const articles = React.lazy(() => import('./articles'))

Moving your use of

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

1 below the last import statement resolves the issue.

Adding an extra semicolon at the end of an import statement

The error is also caused if you add an extra semicolon at the end of an import statement.

Copied!

// 👇️ notice the extra semicolon ; import React from 'react';; // ⛔️ Import in body of module; reorder to top. eslint import/first import axios from 'axios';

Notice that the first import statement has an extra semicolon at the end.

To resolve the issue, remove the second semicolon from the end of the import statement.

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const articles = React.lazy(() => import('./articles'))

Make sure you haven't added a

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

5 call above your

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

2 statements

Another common cause of the error is adding a

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

5 call above an

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

2 statement.

Copied!

import React from 'react'; require('dotenv').config() // ⛔️ Import in body of module; reorder to top. eslint import/first import axios from 'axios';

To resolve the issue, move the

Copied!

import React from 'react'; const ENVIRONMENT = process.env.NODE_ENV; // eslint-disable-next-line import/first import axios from 'axios'; // eslint-disable-next-line import/first import {useState} from 'react'

5 call below the last import statement.

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

0

Disabling the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 rule globally

If you want to disable the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 rule globally, you have to edit your ESLint config at

Copied!

import React from 'react'; / eslint-disable import/first / const ENVIRONMENT = process.env.NODE_ENV; import axios from 'axios'; import {useState} from 'react'

2.

Add the following rule to the

Copied!

import React from 'react'; / eslint-disable import/first / const ENVIRONMENT = process.env.NODE_ENV; import axios from 'axios'; import {useState} from 'react'

3 object in your

Copied!

import React from 'react'; / eslint-disable import/first / const ENVIRONMENT = process.env.NODE_ENV; import axios from 'axios'; import {useState} from 'react'

2 file to disable the

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

5 rule.

Copied!

// ✅ No errors import React from 'react'; import axios from 'axios'; const ENVIRONMENT = process.env.NODE_ENV;

1

If you write your ESLint config using JSON, make sure to double-quote the properties and values in your

Copied!

import React from 'react'; / eslint-disable import/first / const ENVIRONMENT = process.env.NODE_ENV; import axios from 'axios'; import {useState} from 'react'

6 or

Copied!

import React from 'react'; / eslint-disable import/first / const ENVIRONMENT = process.env.NODE_ENV; import axios from 'axios'; import {useState} from 'react'

7 file.