Skip to main content

How to Resolve the "ESLint Error: Import in body of module; reorder to top (import/first)" ESLint Error in JavaScript

The ESLint Error: Import in body of module; reorder to top (import/first) is a common and helpful rule that enforces a clean and consistent code style. It occurs when any code other than an import statement is placed before all the imports at the top of a file.

This guide will explain the reasoning behind this rule, show you the correct way to fix it, and cover the specific edge cases where you might need to disable the rule.

The Core Problem: The import/first Rule Explained​

The eslint-plugin-import library enforces the import/first rule to ensure that all module import statements are grouped together at the very top of your file.

Why is this a rule?

  • Readability: It makes it easy for any developer to see all of a module's dependencies in one place.
  • Predictability: It prevents side effects from other code (like setting environment variables) from running before modules are loaded.
  • Static Analysis: ES modules are designed to be statically analyzable, meaning they can be understood without running any code. Keeping imports at the top helps tools that perform this analysis.

For example,Any code that is not an import statement or a comment, when placed between or before your imports, will trigger the error.

import React from 'react';

// This line of code is not an import and comes before the next import.
const ENVIRONMENT = process.env.NODE_ENV;

// ⛔️ ESLint Error: Import in body of module; reorder to top. (import/first)
import axios from 'axios';

The correct and simplest solution is to follow the rule: place all of your import statements together at the top of the file, before any other executable code.

// ✅ Correct: All import statements are grouped at the top.
import React from 'react';
import axios from 'axios';

// All other code follows after the imports.
const ENVIRONMENT = process.env.NODE_ENV;

function App() {
  // ...
}
note

This is the cleanest and most maintainable way to structure your modules and resolves the ESLint error.

Common Scenarios That Cause the Error​

Variable Declarations Between Imports​

This is the most common cause of the import/first error. Any variable declared before all imports will trigger it.

import React from 'react';

// Declaring a variable between imports causes an error
const ENVIRONMENT = process.env.NODE_ENV;

// ⛔️ ESLint Error: Import in body of module; reorder to top. (import/first)
import axios from 'axios';

console.log(ENVIRONMENT);

The solution is done by moving variable below imports:

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

// Variable is now declared after all imports
const ENVIRONMENT = process.env.NODE_ENV;

console.log(ENVIRONMENT);
note

Always group your imports together at the top, then put any configuration or variable declarations after them. This not only fixes the ESLint error but also makes your file structure cleaner and more consistent.

A require() Call Before an import​

Mixing require() (from CommonJS) and import (from ES Modules) can trigger this error if the require() call comes first.

Example of code with errors:

// This is often done to configure environment variables.
require('dotenv').config();

// ⛔️ ESLint Error: Import in body of module; reorder to top. (import/first)
import React from 'react';

The solution is to move the require() call after all import statements.

// ✅ Correct
import React from 'react';

require('dotenv').config();

An Extra Semicolon​

An extra semicolon between imports can be interpreted as an "empty statement," which is executable code.

Example of code with error:

import React from 'react';; // Note the extra semicolon

// ⛔️ ESLint Error: The empty statement above is not an import.
import axios from 'axios';

The solution is to remove the extra semicolon to fix the error.

import React from 'react'; // NO extra semicolon

import axios from 'axios';

How to Disable the Rule (When Necessary)​

In very rare cases, you might have a legitimate reason to run some code before an import (for example, to set up a global environment variable that a module depends on during its initial evaluation). In these specific situations, you can disable the ESLint rule.

warning

Warning: Disabling this rule should be a last resort. In almost all cases, the code can and should be reordered.

Disabling for a Single Line​

You can use a special comment to disable the rule for the line immediately following it.

import React from 'react';

// Some code that must run here for a specific reason.
setupPolyfills();

// eslint-disable-next-line import/first
import axios from 'axios';

Disabling for the Entire File​

If you have a file with a unique setup that requires this pattern, you can disable the rule for the whole file in your .eslintrc.js or .eslintrc.json configuration.

.eslintrc.js:

module.exports = {
  // ...
  rules: {
    'import/first': 'off',
  },
};
note

This is generally not recommended as it disables a helpful style rule for your entire project. It's better to disable it on a case-by-case basis.

Conclusion​

The import/first ESLint rule is a valuable convention that promotes clean, readable, and predictable code.

  • To fix the error, move all your import statements to the top of your file, above any other code like variable declarations or function calls.
  • Be mindful of simple syntax errors, like extra semicolons, which can also trigger the rule.
  • Only disable the rule with an eslint-disable comment as a last resort when you have a specific, justifiable reason to run code before an import.

Table of Contents