The reason is as follows:

I divide a component into three files

|—Home.jsx         //  Business logic and html
         Home-|-Home.css // style
               |-index.js // Introduce Home.css , then expose the Home component

Index.js is the export of home.js and the import of home.css. The code is as follows:

export { default } from "./Home.jsx";
import "./Home.css";

So, then, it’s wrong. It’s OK to write like this before. Google search says that it’s because of this:

import must precede all other business codes (eslint burst), import must precede all other business codes

If an asynchronous component is imported, it can not be inserted in front of other imported items. If an asynchronous component is imported, it can not be inserted in front of other imported items

similar behavior will report this error

Change it to this:

import "./Home.css";
export { default } from "./Home.jsx";

Well, I’m just changing places here