This is part of my real code:

import { Tree, Text } from '@List'
import Upsert from './Upsert'
import { EntitySeo } from '../../Seo/Exports'

const filters = <>
    <Text
        column="Title"
        placeholder="Title"
    />
</>
...

And my Vite React application loads perfectly fine.

But when I change in some files, the HMR complains that:

react_devtools_backend.js:4026    
ReferenceError: Cannot access 'Text' before initialization
    at Tree.jsx:6:6   

overrideMethod @ react_devtools_backend.js:4026
warnFailedFetch @ client.ts:28    
(anonymous) @ client.ts:333    
await in (anonymous) (async)       
fetchUpdate @ client.ts:320    
(anonymous) @ client.ts:74    
handleMessage @ client.ts:72    
(anonymous) @ client.ts:45    
react_devtools_backend.js:4026    
[hmr] Failed to reload /src/Panel/Menu.jsx.    
This could be due to syntax errors or importing non-existent modules. (see errors above)

I don't know how to debug this. What systematic steps can I take to find out the root of the problem. Because import { Text } from '@List' is lexically in previous lines to its usage.