es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Elemento desconocido aparece en mi aplicación create-react-app con Typescript.

31 Jul, 2023 Programación

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>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    • Una de tus dependencias o scripts puede estar inyectando el elemento iframe.
    • Una extensión o complemento del navegador puede estar agregando el elemento iframe.
    • Tu máquina o red pueden estar infectadas con malware que inyecta el elemento iframe.

    Para resolver este problema, puedes intentar los siguientes pasos:

    1. Revisa tus dependencias y scripts para ver si alguno de ellos podría estar causando el problema.

    2. Desactiva todas las extensiones y complementos del navegador para ver si el problema persiste.

    3. Utiliza un software antivirus para escanear tu máquina y red en busca de cualquier malware que pueda estar inyectando el elemento iframe.

    4. 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:

    useEffect(() => {
  const iframe = document.querySelector('iframe')
  if (iframe) iframe.remove()
}, [])

    Esto eliminará el elemento iframe cuando el componente se monte.

    Esperemos que uno de estos pasos resuelva tu problema.

Comments are closed.