Esto es parte de mi código real:
import { Tree, Text } from '@List' import Upsert from './Upsert' import { EntitySeo } from '../../Seo/Exports' const filters = <> <Text column="Title" placeholder="Title" /> </> ...Y mi aplicación Vite React carga perfectamente bien.
Pero cuando cambio en algunos archivos, el HMR se queja de que:
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) No sé cómo depurar esto. ¿Qué pasos sistemáticos puedo tomar para encontrar la raíz del problema? Porque import { Text } from '@List' está léxicamente en líneas anteriores a su uso.
Para cualquiera que llegue aquí, encontré esta solución y funcionó para mí.
Básicamente, este error tiene dos razones principales.
Mi caso fue el segundo caso y funcionó bien en la primera carga de mi aplicación web, pero para HMR fallaría.
Busqué y encontré esta valiosa herramienta llamada madge .
Lo instalé y encontré todas mis dependencias circulares y una vez que las resolví, ya no vi este error.