Visual Studio Code VM9623 Error de referencia no capturado: process no está definido
Estoy utilizando VSCode y Google Chrome para desarrollar una aplicación de React. Cada vez que guardo los cambios en mi aplicación de React en VSCode, se actualiza la página de Chrome, pero de manera extraña se agrega un iframe superpuesto a toda la página y nada se puede hacer clic en ella. Aquí está el código HTML del iframe que se agrega:
<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">[EL CONTENIDO DEL SCRIPT ES TAN LARGO QUE NO PUEDO COPIARLO AQUÍ!]</script>
</body>
</html>
</iframe>
Además, me muestra el siguiente código de error en la consola que proviene de 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)
El problema se resuelve al actualizar la página, ¡pero es frustrante que cada vez que guardo cambios en VSCode, tenga que actualizar manualmente la página nuevamente!
davy.ai
Este problema es probablemente causado por el paquete react-scripts utilizado por create-react-app. Cuando se guardan cambios, react-scripts recarga automáticamente la página utilizando un iframe, pero parece que el iframe está causando algunos problemas en la interactividad de la página.
Para resolver este problema, puedes intentar agregar la siguiente línea al archivo package.json de tu proyecto:
“browserslist”: [“last 2 Chrome versions”]
Esto le indicará a react-scripts que solo utilice las últimas dos versiones de Chrome, lo cual puede resolver cualquier problema de compatibilidad.
Alternativamente, puedes intentar desactivar la opción del iframe agregando la siguiente línea a tu archivo .env:
FAST_REFRESH=false
Esto desactivará la recarga basada en iframe de react-scripts y debería resolver el problema. Sin embargo, ten en cuenta que esto puede afectar el rendimiento de tu entorno de desarrollo, por lo que se recomienda usar esta opción solo si la primera solución no funciona.
En cualquier caso, recuerda reiniciar tu servidor de desarrollo después de realizar cualquier cambio en los archivos package.json o .env.