Unexpected iframe injected in reactjs app in dev mode

Question

I've a react app, but most of the time when I do changes in the source the browser reloads the new code, but an iframe is being injected into the app over the whole application

I've already reviewed my source code, and of course I'm not doing it by myself, also, I reviewed Chrome extensions that I have installed and basically are just these (Copy All Urls, Google Docs Offline, Redux DevTools, Redux DevTools)

and all libraries that I've installed in package.json files are

{
  "name": "react-ui-generator",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^1.2.6",
    "@babel/core": "^7.14.6",
    "@date-io/date-fns": "^1.3.13",
    "@material-table/core": "~4.3.1",
    "@material-table/exporters": "^1.0.12",
    "@material-ui/core": "~4.12.3",
    "@material-ui/icons": "~4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@monsonjeremy/react-leaflet-core": "^1.1.1",
    "@react-leaflet/core": "npm:@monsonjeremy/react-leaflet-core",
    "@reduxjs/toolkit": "^1.6.0",
    "@rjsf/core": "~3.1.0",
    "@rjsf/material-ui": "~3.1.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aws-amplify": "^4.2.0",
    "axios": "^0.21.1",
    "connected-react-router": "~6.9.1",
    "date-fns": "^2.0.0-beta.5",
    "formik": "^2.2.9",
    "guid": "0.0.12",
    "http-proxy-middleware": "^2.0.1",
    "immutability-helper": "~3.1.1",
    "isomorphic-ws": "^4.0.1",
    "leaflet": "^1.7.1",
    "lodash": "^4.17.21",
    "material-ui-nested-menu-item": "^1.0.2",
    "node-sass": "5.0.0",
    "notistack": "^1.0.10",
    "placeholder-loading": "^0.5.0",
    "react": "^16.14.0",
    "react-color": "^2.19.3",
    "react-dom": "^16.14.0",
    "react-leaflet": "npm:@monsonjeremy/react-leaflet@3.2.1",
    "react-leaflet-markercluster": "^3.0.0-rc1",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-simple-oauth2-login": "^0.5.1",
    "react-spring": "^9.3.1",
    "rxjs": "^7.3.0",
    "typescript": "^4.3.5",
    "web-vitals": "^1.0.1",
    "ws": "^7.5.3",
    "yup": "^0.32.9"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/node-logger": "^6.3.12",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.3.12",
    "@types/leaflet": "^1.7.5",
    "path": "^0.12.7",
    "react-json-editor-ajrm": "^2.5.13",
    "storybook": "^6.3.12",
    "storybook-addon-material-ui": "^0.9.0-alpha.24",
    "storybook-addon-mock": "^1.7.0"
  }
}

and I don't think that any to these are injecting this iframe.

What else can I review to fix/remove this unexpected iframe?

Because is really annoying to refresh the page manually each time or remove this iframe manually, because is blocking the entire page from clicks.

Answer 1

TL;DR

Have you checked your console for uncaught errors being emitted outside of your React application? This seems to happen during dev builds when create-react-app 's error catching mechanism gets confused.

Longer speculation

I've been seeing this as well. This won't be a complete answer, but might help you find the error on your side.

It appears that this overlay is a create-react-app error catching mechanism gone wrong. In our case, there was an error being thrown by a <script> tag outside of the React application code entirely. It was likely generated and attached to the DOM by the Google Tag Manager SDK:

<script type="text/javascript" id="">fbq("trackCustom","Purchase Successful - Free");</script>

We do fire that particular event, but the implementation details are hidden from our React app. fbk is undefined in our dev environment (related to Facebook tracking) and so it throws a ReferenceError and the overlay you're describing pops up.

As for why create-react-app generates a completely transparent edge-to-edge empty iframe that blocks all clicks I have no idea.

Answer 2

Happened to me on every hot reload, preventing inspection of the DOM in Chrome Devtools. When this happens, also a console error is logged Uncaught ReferenceError: process is not defined .

My fix was to add this dev dependency

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

and reinstalling the dependencies.

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