03-12-2024, 08:10 PM
I'm experiencing a problem with my React application ever since I added a new Modal component. Previously, everything was running smoothly, but after the addition of the Modal, an iframe began to appear on the page. This unexpected iframe shows up during file edits, triggering what seems to be a hot reload. In addition, I've encountered an error in the console that reads "Uncaught ReferenceError: process is not defined". It's unclear how the introduction of the Modal has led to these issues, but they seem to be related to the modal's implementation and possibly the hot reloading process. Here's the code snippet for the Modal component:
Here's the relevant section of my HTML file:
The console error points to this line causing issues: "Uncaught ReferenceError: process is not defined", but the error stack trace doesn't provide enough context for me to pinpoint the root cause. I've tried to troubleshoot the problem but haven't made any progress. Does anyone have an idea of what might be going wrong here or how to fix it?
Code:
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;Here's the relevant section of my HTML file:
Code:
<!DOCTYPE html >
<html lang = "en" >
<head >
<meta charset = "utf-8" / >
<
!--...other head elements...-- >
</head> <body id = "app" >
<
!--...other body elements...-- >
<div id = "content" >
<
!--All other content render here-- >
</div> <div class = "ReactModalPortal"
id = "ModalPortal" > < /div>
</body>
</html>The console error points to this line causing issues: "Uncaught ReferenceError: process is not defined", but the error stack trace doesn't provide enough context for me to pinpoint the root cause. I've tried to troubleshoot the problem but haven't made any progress. Does anyone have an idea of what might be going wrong here or how to fix it?
