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() {
    super();
  }
  render() {
    return (
      <div>
        <button className="clickButton" type="button">
          Click
        </button>
      </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

rules:
  import/first: off