How to fix Import In the body of module; reorder to top import/first? in React and javascript

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

import React from "react";
import "./styles.css"
class ButtonStyledComponent extends React.Component {
  constructor() {
  render() {
    return <div>
      <button className="clickButton"
    </div >

export default ButtonStyledComponent;

import styled from "styled-components";

const Button = styled.button`
font-size: 1rem; 
font-weight: 1.5; 
line-height: 1.5; 
color: white; 
border-radius: 25px; 
background-color: blue; 
padding: 0px 2em; 
outline: none;
 border: none;

  &:hover {
    color: white; 
    background-color: lightblue; 

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.

It gives a compilation error due to the eslint default rule.

We can disable the rules or fix the error.

To fix this, Move all the import statements before the variable declaration.

How to avoid import reorder error in javascript with ESLint

You can add this line in the component to disable the import/first rule

/* eslint-disable import/first */

Or you can disable all rules in a react component

/* eslint-disable import/first */

if you want to disable it at the project level, Add the following to .eslintrc.yaml

  import/first: off
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.

Related posts

Basic React Interview questions and answers

Best ways to add an element to an array in React state with examples

Difference between Development and Production Builds in React

Difference between pureComponent and component in React

Difference between super and super props in React constructor class?

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials