Elemento desconocido aparece en mi aplicación create-react-app con Typescript.
Estudio una aplicación de React con TypeScript. Mi problema es que un elemento HTML desconocido, iframe, aparece fuera del elemento id=”root” en el elemento body de index.html en la carpeta pública de la aplicación cuando el servidor de desarrollo está funcionando. Su z-index bloquea todas las entradas del mouse en la aplicación. ¿Cómo puedo eliminar esto? ¿Me podrías ayudar?
Archivo de renderización:
ReactDOM.render(
<react.strictmode>
<themeprovider theme="{theme}">
<app></app>
</themeprovider>
</react.strictmode>,
document.getElementById('root')
);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Elemento desconocido en index.html cuando el servidor de desarrollo está funcionando:
<body>
<div id="root"></div>
<iframe style="position: fixed; top: 0px;
left: 0px; width: 100%;
height: 100%; border: none;
z-index: 2147483647;">
</iframe>
</body>
davy.ai
Parece que se está agregando un elemento iframe no deseado a tu archivo index.html fuera del elemento #root cuando el servidor de desarrollo está en ejecución. El índice z de este iframe está bloqueando todas las entradas del mouse en la aplicación.
Puede haber varias posibilidades que causen este problema:
Para resolver este problema, puedes intentar los siguientes pasos:
Desactiva todas las extensiones y complementos del navegador para ver si el problema persiste.
Utiliza un software antivirus para escanear tu máquina y red en busca de cualquier malware que pueda estar inyectando el elemento iframe.
Si ninguno de los pasos anteriores funciona, intenta eliminar el elemento iframe utilizando JavaScript. Agrega el siguiente código a tu archivo index.tsx o App.tsx:
Esto eliminará el elemento iframe cuando el componente se monte.
Esperemos que uno de estos pasos resuelva tu problema.