Es la primera vez que hago una pregunta, así que no tengo mucha idea de cómo describirla/escribirla.
Estoy trabajando en un proyecto de reacción (haciendo clones con fines de aprendizaje). Ver tutoriales en video y usar firebase y redux por primera vez. Después de progresar mucho, solucioné el problema, en el que cuando guardo mi trabajo, el host local 3000 no se actualiza. Sé que hay muchas respuestas, probé todas pero no me funcionaron.
Pero el problema principal es que en mi herramienta de desarrollador veo
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>
Dentro de esto, hay #document y dentro de él, <html> then <head> and <body>.
No sabía qué es esto y la razón por la que aparece. Luego busco qué es iframe, pero nunca uso tal cosa en mi proyecto. Y después de mucha investigación cómo eliminarlo. No encontré la respuesta y la forma de hacerlo. Captura de pantalla de mi herramienta de desarrollador .
Puedo ver todos mis componentes, pero no me responden, por ejemplo, no puedo tomar entradas, no hay efectos de desplazamiento, etc. Pero cuando elimino manualmente <iframe> de la herramienta de desarrollo, funciona bien.
El iframe es usado por reaccionar para inyectar cambios al dom durante hotreload. A veces falla y no elimina el iframe, por lo tanto, el comportamiento.
Una solución sería agregar:
"resolutions": { "react-error-overlay": "6.0.9" },A su paquete.json inmediatamente después de las secuencias de comandos, elimine los archivos package.lock o yarn.lock, instale los paquetes nuevamente.