1

I'm using VSCode and Google Chrome from developing a React App. Every time I save changes in my React app on VSCode, it refreshes the Chrome page, but strangely it adds an overlay iframe to the whole page and nothing is clickable anymore. Here is the html code for the iframe that gets added:

<iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;">
<html data-lt-installed="true">
<head></head>
<body>
<script type="text/javascript">[THE CONTENT OF THE SCRIPT IS SO LONG THAT I CANNOT COPY IT HERE!]</script>
</body>
</html>
</iframe>

Also, it gives me the following error code in the console that is coming from VM9623:2:

Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)

The issue gets resolved by refreshing the page, but it is frustrating that every time I save changes on VSCode, I have to manually refresh the page again!

1man
  • 5,216
  • 7
  • 42
  • 56

2 Answers2

0

If upgrading to react-scriptsv5 is not working for you, you can also try another alternative which is fixed in react-error-overlay in version 6.0.9: All this to your package.json React Uncaught ReferenceError: process is not defined

it worked for me to add this to my package.json

"devDependencies": {
   "react-error-overlay": "6.0.9",
}

link to article: https://github.com/facebook/create-react-app/issues/11773

0

for me the following worked:

//reset-css file or css global file
iframe {
  display: none !important;
}

remembering that this error is happening only in development environments, build from production environments work normally, apparently it's a react hot-refresh problem

as said here:

https://github.com/facebook/create-react-app/issues/11773#issuecomment-995415266