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 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 I 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 component to disable 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 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

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

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