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

Similar Posts:

• Vue adds route errors dynamically: Uncaught Error… [How to Solve]
• [Solved] xadmin Error: ImportError: cannot import name ‘DEFAULT_FORMATS’ from ‘import_export.admin’ (/home/lijun/app/hippo/hippo_api/venv/lib/python3.8/site-packages/import_export/admin.py)
• DOM style setting methods in the four components of react
• Invalid prop: type check failed for prop value
• How to Solve Vue error: Maximum call stack size exceeded
• Angular7:Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ [Solved]
• How to deal with the error “cannot read property ‘set state’ of undefined” in react
• How to Fix Git push warning: push.default is unset;