“Import in body of module; reorder to top import/first” – React js

  • 2 mins read

In React.js, the error message “Import in body of module; reorder to top import/first” can occur due to reasons

  1. when you have import statements within a component’s body instead of at the top of the file. In React, import statements should be placed at the beginning of the component file before any other code or declarations.

Here’s an example of how you can resolve this error in a React component:

Before:

import React from 'react';

function MyComponent() {
  // Component code here

  import SomeModule from 'some-module'; // Import within the body of the component

  // Rest of the component code
}

After:

 
import React from 'react';
import SomeModule from 'some-module'; // Import at the top of the file

function MyComponent() {
  // Component code here

  // Rest of the component code
}

By moving the import statement to the top of the file, before the component declaration, you ensure that the import is executed before the component is defined. This follows the standard practice in React.js for organizing imports and helps maintain a clean and predictable code structure.

2.  If you declare variable in between your imports

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

const URL = process.env.REACT_APP_API_BASE;

import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

declare variables after importing everything,

import React from 'react';
import axios from 'axios';
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

const URL = process.env.REACT_APP_API_BASE;

Leave a Reply