title: React Uncaught ReferenceError: process is not defined
body: <p>I am getting issues with iframe.
  Till today everything was working as expected. Today I added a very simple Modal component and somehow iframe started appearing. It appears when I am editing the file and hot reload is done. Also with this issue, it's showing an error in Console as &quot;Uncaught ReferenceError: process is not defined&quot;.
  Can someone please help me with this?</p>
  <pre><code>import React, {useEffect} from 'react';
  import ReactDOM from &quot;react-dom&quot;;
  import Close from &quot;../static/assets/close-white.svg&quot;
  
  const trapStyles = {
      position: 'absolute',
      opacity: 0
  }
  const Test = () =&gt; {
  
      return ReactDOM.createPortal(
          &lt;div data-react-modal-body-trap=&quot;&quot; tabIndex=&quot;0&quot; style={trapStyles}/&gt;,
          document.getElementById(&quot;app&quot;)
      )
  }
  
  const Modal = ({ open, onClose, children }) =&gt; {
  
      useEffect(() =&gt; {
  
          if (open)document.getElementById(&quot;app&quot;).classList.add(&quot;ReactModal__Body--open&quot;);
  
          return () =&gt; {
              document.getElementById(&quot;app&quot;).classList.remove(&quot;ReactModal__Body--open&quot;)
          }
      })
      if (!open) return null
  
      return ReactDOM.createPortal(
          &lt;&gt;
              &lt;Test /&gt;
              &lt;div className=&quot;ReactModal__Overlay--after-open&quot;&gt;
                  &lt;div className=&quot;modal-form-page&quot;
                       tabIndex=&quot;-1&quot; role=&quot;dialog&quot; aria-modal=&quot;true&quot;&gt;
                      &lt;button onClick={onClose} className=&quot;close-modal&quot;&gt;
                          &lt;img id=&quot;close-button&quot; alt=&quot;close&quot; src={Close}/&gt;
                      &lt;/button&gt;
                      { children }
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;,
          document.getElementById(&quot;ModalPortal&quot;)
      )
  };
  
  export default Modal;
  </code></pre>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;/&gt;
      &lt;link href=&quot;%PUBLIC_URL%/favicon.ico&quot; rel=&quot;icon&quot;/&gt;
      &lt;meta content=&quot;width=device-width, initial-scale=1&quot; name=&quot;viewport&quot;/&gt;
      &lt;meta content=&quot;#000000&quot; name=&quot;theme-color&quot;/&gt;
      &lt;link href=&quot;%PUBLIC_URL%/logo192.png&quot; rel=&quot;apple-touch-icon&quot;/&gt;
      &lt;link href=&quot;%PUBLIC_URL%/manifest.json&quot; rel=&quot;manifest&quot;/&gt;
      &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body id=&quot;app&quot;&gt;
  &lt;noscript&gt;You need to enable javascript to run this website&lt;/noscript&gt;
  &lt;div id=&quot;content&quot;&gt;
  &lt;-- All other content render here --&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ReactModalPortal&quot; id=&quot;ModalPortal&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <pre><code>Uncaught ReferenceError: process is not defined
      at Object.4043 (&lt;anonymous&gt;:2:13168)
      at r (&lt;anonymous&gt;:2:306599)
      at Object.8048 (&lt;anonymous&gt;:2:9496)
      at r (&lt;anonymous&gt;:2:306599)
      at Object.8641 (&lt;anonymous&gt;:2:1379)
      at r (&lt;anonymous&gt;:2:306599)
      at &lt;anonymous&gt;:2:315627
      at &lt;anonymous&gt;:2:324225
      at &lt;anonymous&gt;:2:324229
      at HTMLIFrameElement.e.onload (index.js:1)
  4043 @ VM128:2
  r @ VM128:2
  8048 @ VM128:2
  r @ VM128:2
  8641 @ VM128:2
  r @ VM128:2
  (anonymous) @ VM128:2
  (anonymous) @ VM128:2
  (anonymous) @ VM128:2
  e.onload @ index.js:1
  be @ index.js:1
  he @ index.js:1
  tryDismissErrorOverlay @ webpackHotDevClient.js:184
  onHotUpdateSuccess @ webpackHotDevClient.js:109
  handleApplyUpdates @ webpackHotDevClient.js:257
  (anonymous) @ webpackHotDevClient.js:273
  load (async)
  be @ index.js:1
  he @ index.js:1
  tryDismissErrorOverlay @ webpackHotDevClient.js:184
  onHotUpdateSuccess @ webpackHotDevClient.js:109
  handleApplyUpdates @ webpackHotDevClient.js:257
  (anonymous) @ webpackHotDevClient.js:273
  Promise.then (async)
  tryApplyUpdates @ webpackHotDevClient.js:271
  handleSuccess @ webpackHotDevClient.js:106
  push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:203
  </code></pre>