Tengo problemas con iframe. Hasta hoy todo funcionaba como se esperaba. Hoy agregué un componente Modal muy simple y de alguna manera iframe comenzó a aparecer. Aparece cuando estoy editando el archivo y se realiza la recarga en caliente. También con este problema, muestra un error en la consola como "Error de referencia no detectado: el proceso no está definido". ¿Puede alguien por favor ayudarme con esto?
import React, {useEffect} from 'react'; import ReactDOM from "react-dom"; import Close from "../static/assets/close-white.svg" const trapStyles = { position: 'absolute', opacity: 0 } const Test = () => { return ReactDOM.createPortal( <div data-react-modal-body-trap="" tabIndex="0" style={trapStyles}/>, document.getElementById("app") ) } const Modal = ({ open, onClose, children }) => { useEffect(() => { if (open)document.getElementById("app").classList.add("ReactModal__Body--open"); return () => { document.getElementById("app").classList.remove("ReactModal__Body--open") } }) if (!open) return null return ReactDOM.createPortal( <> <Test /> <div className="ReactModal__Overlay--after-open"> <div className="modal-form-page" tabIndex="-1" role="dialog" aria-modal="true"> <button onClick={onClose} className="close-modal"> <img id="close-button" alt="close" src={Close}/> </button> { children } </div> </div> </>, document.getElementById("ModalPortal") ) }; export default Modal; <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <link href="%PUBLIC_URL%/favicon.ico" rel="icon"/> <meta content="width=device-width, initial-scale=1" name="viewport"/> <meta content="#000000" name="theme-color"/> <link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon"/> <link href="%PUBLIC_URL%/manifest.json" rel="manifest"/> <title>React App</title> </head> <body id="app"> <noscript>You need to enable javascript to run this website</noscript> <div id="content"> <-- All other content render here --> </div> <div class="ReactModalPortal" id="ModalPortal"></div> </body> </html> 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) 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:203El problema se resolvió actualizando react-scripts a 5.0.0
Encontré la mejor solución.
El problema es que pierde la variable window.process cuando React se carga en caliente, y el proceso existe solo en el nodo, no en el navegador.
Por lo tanto, debe inyectarlo en el navegador cuando se carga la aplicación.
Agregue esta línea a App.js
useEffect(() => { window.process = { ...window.process, }; }, []);Para aquellos que todavía tienen problemas con esto: si usa Webpack, ejecute npm install -D dotenv-webpack y si usa mecanografiado npm install -D @types/dotenv-webpack .
Luego, en la configuración de su paquete web, agregue import Dotenv from "dotenv-webpack"; Y
... plugins: [ ... new Dotenv(), ], ...Consulte https://github.com/mrsteele/dotenv-webpack/blob/master/README.md
Después de probar todo lo demás, esto finalmente funcionó para mí.
Intenté actualizar los scripts de reacción a 5.0.0, pero no funcionó.
npm i -D react-error-overlay@6.0.9
Actualizar a react-scripts v5 no siempre es la solución.
El motivo completo de este error se describe aquí . En resumen, aquí hay un breve resumen:
El error es el resultado de react-error-overlay ( que muchas personas nunca habrían oído hablar porque es una dependencia de react-scripts ). Las dependencias de este paquete se actualizaron para admitir webpack v5, que desafortunadamente no es compatible con react-scripts v4.
Si la actualización a react-scripts v5 no funciona para usted, también puede probar otra solución alternativa que consiste en anclar react-error-overlay a la versión 6.0.9 :
Agregue esto a su paquete.json
"resolutions": { "//": "See https://github.com/facebook/create-react-app/issues/11773", "react-error-overlay": "6.0.9" } Elimine su yarn.lock o package-lock.json , luego instale sus dependencias nuevamente.
yarn tendrá en cuenta el campo de resoluciones de forma inmediata.
Para los espacios de trabajo de hilo , coloque la resolución anterior en el package.json , no en la carpeta problemática. Ver este comentario de problema .
Para los usuarios de npm , debe asegurarse de que npm use el campo resolutions cuando ejecuta npm install . Para automatizar la instalación, vea esta respuesta
Otra solución (no tan popular) es usar un complemento de paquete web:
plugins:[ new webpack.DefinePlugin({ process: {env: {}} }) ] Si usa craco , solo necesita modificar su archivo craco.config.js para agregar ese complemento:
{ ... webpack: { plugins: { add: [ new webpack.DefinePlugin({ process: {env: {}} }) ] } } } Para usuarios customize-cra , vea este comentario .
Este último método no es popular porque no muchos usuarios de CRA tienen que tocar el paquete web directamente para trabajar con reaccionar.
La actualización de react-scripts 4.0.3 a 5.0.0 funcionó para mí.
Terminé con el siguiente error (relevante si estás usando craco):
TypeError: match.loader.options.plugins no es una función
Esto fue resuelto por @weiwei en su respuesta aquí
Hasta que una solución sea definitiva ( tal vez este PR ), para cualquiera que use npm (no yarn), la solución es esta:
agregar a paquete.json:
"resolutions": { "react-error-overlay": "6.0.9" }, "scripts":{ "preinstall": "npx npm-force-resolutions", .... }, "devDependencies":{ "react-error-overlay": "6.0.9", ... }y luego hacer un
npm install
Agregue este código en package.json
"devDependencies": { "react-error-overlay": "6.0.9" },Después de eso, ejecute el comando de instalación npm. Funcionó para mí después de 2 días de desplazamiento en Internet.
en el archivo yarn.lock o package-lock.json para encontrar la cadena
"react-error-overlay@npm:^6.0.9": version: 6.0.10 <-- here problem etc...y reemplazar a
react-error-overlay@^6.0.9: version "6.0.9" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==archivo guardado y ejecute la instalación de hilo
Para aquellos que usan create-react-app con customize-cra, pueden usar la solución Método 2 de @smac89 con addWebpackPlugin, esto funciona para mí.
scripts de reacción: 5.0.0 paquete web: 5.64.4
// config-overrides.js const webpack = require('webpack'); const { override, addWebpackPlugin } = require('customize-cra'); module.exports = override( addWebpackPlugin( new webpack.DefinePlugin({ process: { env: {} }, }) ) );esta solución muestra una advertencia en el inicio de npm, pero la aplicación se compila correctamente.
WARNING in DefinePlugin Conflicting values for 'process.env'Esta advertencia no frenó nada, pero si alguien sabe cómo solucionarlo, responda este hilo :)
Si está utilizando npm> v8.3, puede usar overrides como esta en su package.json .
"overrides": { "react-error-overlay": "6.0.9" },Para obtener más información acerca de las anulaciones, vaya aquí .
El problema es un cambio importante en 6.0.10 , algunas dependencias como react-dev-utils instalarán esta versión incluso si ancla la versión de react-error-overlay a 6.0.9 , por eso es necesario usar anulaciones.
Actualizar los scripts de reacción de v4 a "scripts de reacción": "^ 5.0.0", parece que me ayudó
Muchas respuestas sugieren anular la react-error-overlay reacción a 6.0.9 , pero esto no funcionó para mí (el 11 de febrero de 2022). Estaba usando react-scripts 5.0.0 y react-error-overlay 6.0.10 antes de probar la anulación de superposición.
En lugar de pasar por la molestia de definir la configuración del paquete web en mi aplicación CRA (como lo sugiere smac89 ), bajé la versión de react-scripts a 4.0.3 .
Funciona bien con react-scripts: 4.0.3 , que resolvió react-error-overlay a 6.0.10 .
Entonces, mi solución es:
"react-scripts": "4.0.3" en package.jsonMe enfrenté al mismo problema hoy (14 de febrero de 22) usando contenedores Docker para una aplicación ReactJS y lo resolví degradando la versión de react-scripts a 4.0.3 y también instalando react-error-overlay en la versión 6.0.9. Así que los pasos fueron:
Espero que ayude a alguien a ahorrar algo de tiempo, Saludos.