How to debug "Cannot access X before initialization" errors?

Question

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.

Answer 1

For anyone getting here, I found this solution and it worked for me.

Basically this error has two main reasons.

1. Either you have lexical problem (literally defining something after you have used it) in which case you always get error
2. Or you have circular dependency. A imports B and B imports A.

My case was the second case and it was working fine in the first load of my web app, but for HMR it would fail.

I searched and found this valuable tool called madge.

I installed it and found all of my circular dependencies and once I resolved them, I no longer saw this error.