'Unknown element shows up in may create-react-app Application with Typescript

I study react application with Typescript. my problem is unknown HTML iframe HTML element shows up outside the id="root" element in body element of index.html of public folder of the application when the development server is working. Its z-index block all input of the mouse on the application. How can I remove this? could you help me?

rendering file

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <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>

Unknown element in index.html when development server is working.

<body>
    <div id="root"></div>

    <iframe style="position: fixed; top: 0px; 
    left: 0px; width: 100%; 
    height: 100%; border: none; 
    z-index: 2147483647;">
    </iframe>
</body>

Solution 1:^[1]

I am facing same problem in my local development machine. I solved this problem. But my solution is a brute-force solution (not ideal or actual solution). I used this css globally.

iframe {
  display: none !important;
}

unknown injected iframe

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shahriar Ahmed

'Unknown element shows up in may create-react-app Application with Typescript

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]