0
324
VistasCreate-React-App crea este <iframe> que me impide hacer clic o editar directamente la aplicación a menos que la elimine en el editor del navegador de elementos
Recientemente hice una instalación global de create-react-app y tengo un problema en el que, a veces, cuando estoy trabajando en un proyecto, en lugar de editar directamente lo que he renderizado, crea este contenedor alrededor de toda la aplicación.
Tras una inspección más detallada, parece que es un que se representa en el navegador de la siguiente manera:
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe>A continuación, hice una captura de pantalla de cómo se ve esto en mi aplicación (el iframe es el texto naranja a la derecha), pero es muy molesto y eliminé los accesorios css y no puedo imaginar qué está causando este contenedor alrededor de mi aplicación.
¿Alguien más se ha encontrado con esto? Tengo que eliminar este iframe para editar los elementos directamente desde el navegador, pero no entiendo por qué esto se muestra cada vez que cargo la aplicación en el navegador.
3 Respuestas
Responde la pregunta0
Entonces, después de MUCHA investigación y pruebas, finalmente descubrí esto y espero que pueda salvar a cualquiera en la misma situación en la que yo estaba 😊
Encontré dos soluciones que pueden resolver esto, una con un archivo .env que a veces funciona, y la otra solución es con css que quiero decir que siempre resolverá este problema.
Arreglo #1: solución .env
En el nivel de la carpeta raíz (el mismo nivel que .gitignore, package.json, README.md, yarn.lock, /src), cree un archivo .env e incluya lo siguiente en él:
FAST_REFRESH=falseEsto a veces funciona, pero si esto no funciona después de un tiempo, continúe con la segunda solución a continuación.
Corrección n.º 2: corrección de App.css para deshabilitar eventos de puntero para iframe
Esta solución es lo que me ha ahorrado un montón. Básicamente, lo que corrige esta solución es el iframe envolvente alrededor de los archivos html que existen en una aplicación en la plantilla React.js.
En su archivo de estilos globales, agregue la siguiente propiedad a un elemento iframe: pointer-events: none . Luego importo este archivo css en mi página JSX para que elimine este envoltorio iframe alrededor de la página. Esto deshabilitará la superposición de iframe y le permitirá hacer clic de manera efectiva en cualquier lugar dentro del marco de la ventana.
iframe { pointer-events: none; }Esperemos que una de estas soluciones le ahorre horas de investigación y tiempo 😊
0
No lo he probado, pero parece que la respuesta aceptada simplemente deshabilitará la actualización rápida, lo cual no es ideal, así que ...
Eche un vistazo a esta respuesta de problema de github
https://github.com/facebook/create-react-app/issues/11880#issuecomment-1005409614
Específicamente solo necesitaba
// package.json "resolutions": { "react-error-overlay": "6.0.9" }, Asegúrese de ejecutar yarn o npm install después de actualizar
0
Tuve este problema porque tenía errores de pelusa en mi código, y después de corregir todos los errores de pelusa, el iframe desapareció . Vea los detalles aquí.
