0
783
ViewsReaccionar inyectando iframe con max z-index al recargar después de cambios (desarrollo)
Tengo una aplicación Create React con el siguiente archivo .env:
BROWSER=none SKIP_PREFLIGHT_CHECK=true INLINE_RUNTIME_CHUNK=false Cuando inicio la aplicación con yarn start , después de cualquier cambio de código, el servidor realiza el reemplazo sin actualizar la página y descartar el estado de la página, pero inyecta un iframe en mi HTML, con el índice z máximo, por lo que no puedo hacer nada. interacción, como un clic.
El iframe inyectado es como:
<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: medium none; z-index: 2147483647;"></iframe>¿Hay alguna forma de evitar este iframe o incluso su índice z gigante que está bloqueando toda la página?
3 answers
Answer question0
Encontró la causa raíz: este iframe es utilizado por el cargador en caliente para inyectar código en el DOM. Se añade y se retira inmediatamente después de la inyección. Si ocurre un error mientras esto sucede, el cargador en caliente se rompe y no elimina el iframe.
En mi caso, fue un error de Content-Security-Policy que provocó un error durante la inyección.
Acabo de ajustar mis políticas en mi aplicación y ahora funciona bien.
0
En realidad, este es un error conocido en react-scripts , que se usa en create-react-app.
Aparentemente, están trabajando en una solución para react-scripts v5.0.1, pero agregar las siguientes líneas a su paquete.json lo solucionará:
"resolutions": { "react-error-overlay": "6.0.9" }Entonces su paquete.json debería verse así:
{ "name": "whatever", "version": "0.1.0", "private": true, "dependencies": { ... }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "resolutions": { "react-error-overlay": "6.0.9" }, ... }Asegúrese de eliminar sus node_modules y package-lock.json o yarn.lock, y vuelva a instalar sus paquetes.
Aquí hay un enlace al problema abierto: https://github.com/facebook/create-react-app/issues/11773 (también 11771, pero parece estar cerrado).
0
Tenía el mismo problema. En mi caso específico, la causa raíz fue porque estaba usando un process.env como accesorio predeterminado:
const MyComponent = ({someProp = process.env.SOME_VAR}) => { ... }Esto resultó en el siguiente error y el temido iframe de la muerte:
