I am getting issue with iframe. Till today everything was working as expected. Today I added very simple Modal component and somehow iframe started appearing. It appears when I am editing file and hot reload is done. Also with this issue it's showing error in Console as "Uncaught ReferenceError: process is not defined". Can someone please help me with this?
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:203
The issue was solved by updating react-scripts to 5.0.0
Until a fix is final(maybe this PR), for anyone using npm(not yarn) the solution is this:
add to package.json:
"resolutions": {
"react-error-overlay": "6.0.9"
},
"scripts":{
"preinstall": "npx npm-force-resolutions",
....
},
"devDependencies":{
"react-error-overlay": "6.0.9",
...
}
and then do an
npm install
Upgrading react-scripts from v4 to "react-scripts": "^5.0.0", seem helped me
I tried updating react-scripts to 5.0.0, but that didn't work.
npm i -D react-error-overlay@6.0.9
Add this code in package.json
"devDependencies": {
"react-error-overlay": "6.0.9" },
After that run npm install command. It worked for me after 2 days of scrolling on the internet.
Upgrading to react-scripts v5 is not always the solution.
The full reason for this bug is described here. In short here is a brief summary:
The error is as a result of react-error-overlay (which many people would never have heard of because it is a dependency of react-scripts). This package's dependencies were update to support webpack v5, which unfortunately is not compatible with react-scripts v4.
If upgrading to react-scripts v5 is not working for you, you can also try another workaround which is to pin react-error-overlay to version 6.0.9:
Add this to your package.json
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
Delete your yarn.lock or package-lock.json, then install your dependencies again.
yarn will take the resolutions field into consideration out of the box.
For npm users, you need to make sure npm uses the resolutions field when you run npm install. To automate the installation, see this answer
Yet another (not so popular) workaround is to use a webpack plugin:
plugins:[
new webpack.DefinePlugin({
process: {env: {}}
})
]
If you use craco, you just need to modify your craco.config.js file to add that plugin:
{
...
webpack: {
plugins: {
add: [
new webpack.DefinePlugin({
process: {env: {}}
})
]
}
}
}
This last method is not popular because not many CRA users ever have to touch webpack directly to work with react.
Upgrading from react-scripts 4.0.3 to 5.0.0 worked for me.
I ended up with the following error (relevant if you're using craco):
TypeError: match.loader.options.plugins is not a function
This was solved by @weiwei in their answer here
If you are using npm > v8.3 you can use overrides like so in your package.json.
"overrides": {
"react-error-overlay": "6.0.9"
},
For more information about overrides, go here.
The issue is a breaking change in 6.0.10, some dependencies like react-dev-utils will install this version even if you pin the version of react-error-overlay to 6.0.9 that is why it is necessary to use overrides.