We Keep Coding

Unexpected iframe injected in reactjs app in dev mode

I've a react app, but most of the time when I do changes in the source the browser reloads the new code, but an iframe is being injected into the app over the whole application
I've already reviewed my source code, and of course I'm not doing it by myself, also, I reviewed Chrome extensions that I have installed and basically are just these (Copy All Urls, Google Docs Offline, Redux DevTools, Redux DevTools)
and all libraries that I've installed in package.json files are
{
"name": "react-ui-generator",
"version": "0.0.0",
"private": true,
"dependencies": {
"#aws-amplify/ui-react": "^1.2.6",
"#babel/core": "^7.14.6",
"#date-io/date-fns": "^1.3.13",
"#material-table/core": "~4.3.1",
"#material-table/exporters": "^1.0.12",
"#material-ui/core": "~4.12.3",
"#material-ui/icons": "~4.11.2",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#monsonjeremy/react-leaflet-core": "^1.1.1",
"#react-leaflet/core": "npm:#monsonjeremy/react-leaflet-core",
"#reduxjs/toolkit": "^1.6.0",
"#rjsf/core": "~3.1.0",
"#rjsf/material-ui": "~3.1.0",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"aws-amplify": "^4.2.0",
"axios": "^0.21.1",
"connected-react-router": "~6.9.1",
"date-fns": "^2.0.0-beta.5",
"formik": "^2.2.9",
"guid": "0.0.12",
"http-proxy-middleware": "^2.0.1",
"immutability-helper": "~3.1.1",
"isomorphic-ws": "^4.0.1",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"material-ui-nested-menu-item": "^1.0.2",
"node-sass": "5.0.0",
"notistack": "^1.0.10",
"placeholder-loading": "^0.5.0",
"react": "^16.14.0",
"react-color": "^2.19.3",
"react-dom": "^16.14.0",
"react-leaflet": "npm:#monsonjeremy/react-leaflet#3.2.1",
"react-leaflet-markercluster": "^3.0.0-rc1",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-simple-oauth2-login": "^0.5.1",
"react-spring": "^9.3.1",
"rxjs": "^7.3.0",
"typescript": "^4.3.5",
"web-vitals": "^1.0.1",
"ws": "^7.5.3",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"devDependencies": {
"#storybook/addon-actions": "^6.3.12",
"#storybook/addon-essentials": "^6.3.12",
"#storybook/addon-links": "^6.3.12",
"#storybook/node-logger": "^6.3.12",
"#storybook/preset-create-react-app": "^3.2.0",
"#storybook/react": "^6.3.12",
"#types/leaflet": "^1.7.5",
"path": "^0.12.7",
"react-json-editor-ajrm": "^2.5.13",
"storybook": "^6.3.12",
"storybook-addon-material-ui": "^0.9.0-alpha.24",
"storybook-addon-mock": "^1.7.0"
}
}
and I don't think that any to these are injecting this iframe.
What else can I review to fix/remove this unexpected iframe?
Because is really annoying to refresh the page manually each time or remove this iframe manually, because is blocking the entire page from clicks.

TL;DR
Have you checked your console for uncaught errors being emitted outside of your React application? This seems to happen during dev builds when create-react-app's error catching mechanism gets confused.
Longer speculation
I've been seeing this as well. This won't be a complete answer, but might help you find the error on your side.
It appears that this overlay is a create-react-app error catching mechanism gone wrong. In our case, there was an error being thrown by a <script> tag outside of the React application code entirely. It was likely generated and attached to the DOM by the Google Tag Manager SDK:
<script type="text/javascript" id="">fbq("trackCustom","Purchase Successful - Free");</script>
We do fire that particular event, but the implementation details are hidden from our React app. fbk is undefined in our dev environment (related to Facebook tracking) and so it throws a ReferenceError and the overlay you're describing pops up.
As for why create-react-app generates a completely transparent edge-to-edge empty iframe that blocks all clicks I have no idea.

Happened to me on every hot reload, preventing inspection of the DOM in Chrome Devtools. When this happens, also a console error is logged Uncaught ReferenceError: process is not defined.
My fix was to add this dev dependency
"devDependencies": {
"react-error-overlay": "6.0.9"
},
and reinstalling the dependencies.
Reference: https://github.com/facebook/create-react-app/issues/11773#issuecomment-995933869

Picker has been removed from React Native. It can now be installed and imported from '#react-native-picker/picker'

PLEASE HELP!!I have search the entire project which DOES NOT use Pricker at all but when I run npx react-native run-android it throws out :
ERROR Invariant Violation: Picker has been removed from React Native.
It can now be installed and imported from
'#react-native-picker/picker' instead of 'react-native'. See
https://github.com/react-native-picker/picker ERROR Invariant
Violation: Module AppRegistry is not a registered callable module
(calling runApplication). A frequent cause of the error is that the
application entry file path is incorrect. This can also happen when
the JS bundle is corrupt or there is an early initialization error
when loading React Native.
Same problem faced by this guy at the below link...No answer available... Please help...Thank you in advance
Invariant Violation: Picker has been removed from React Native
I have #react-native-picker/picker installed
This is my package.json
"name": "MYAPP",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"build-android": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.android.js --bundle-output iOS/main.jsbundle --platform 'android' --assets-dest ./ --dev false --reset-cache",
"test": "jest",
"test:watch": "npm run test -- --watch",
"postinstall": "npx jetify",
"extractLangs": "react-gettext-parser --output messages.pot 'src/**/*.js'"
},
"dependencies": {
"#react-native-community/cli": "^6.3.1",
"#react-native-community/masked-view": "0.1.11",
"#react-native-picker/picker": "^2.2.1",
"axios": "0.24.0",
"base-64": "1.0.0",
"date-fns": "2.27.0",
"gettext.js": "git+https://github.com/freiserg/gettext.js.git",
"lodash": "4.17.21",
"react": "17.0.2",
"react-native": "0.66.3",
"react-native-device-info": "8.4.8",
"react-native-eject": "0.1.2",
"react-native-extended-stylesheet": "0.12.0",
"react-native-firebase": "^5.6.0",
"react-native-gesture-handler": "^2.1.0",
"react-native-keyboard-aware-scroll-view": "0.9.5",
"react-native-navigation": "7.24.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-splash-screen": "3.3.0",
"react-native-swipeout": "2.3.6",
"react-native-swiper": "1.6.0",
"react-native-vector-icons": "9.0.0",
"react-navigation-stack": "^2.10.4",
"react-redux": "7.2.6",
"redux": "4.1.2",
"redux-logger": "3.0.6",
"redux-persist": "6.0.0",
"redux-thunk": "2.4.1",
"shitty-qs": "1.0.1",
"tcomb-form-native": "0.6.20"
},
"devDependencies": {
"babel-eslint": "10.0.1",
"babel-jest": "27.4.5",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"eslint": "8.4.1",
"eslint-config-airbnb": "19.0.2",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-react": "7.27.1",
"jest": "27.4.5",
"jetifier": "2.0.0",
"metro-react-native-babel-preset": "^0.66.2",
"nock": "13.2.1",
"react-gettext-parser": "1.16.0",
"react-native-mock": "0.3.1",
"react-test-renderer": "17.0.2",
"redux-mock-store": "1.5.4"
},
"jest": {
"preset": "react-native",
"verbose": true,
"setupFiles": [
"<rootDir>/__tests__/mocks/global.js"
],
"testMatch": [
"**/__tests__/**/*.spec.js?(x)"

Install #react-native-picker/picker
Upgrade "native-base": "2.15.2"

Officially picker has been removed from react-native. You can use the community edition. #react-native-community/picker

Delete node modules folder then run yarn install at the terminal in your projects directory.
Then try to run the app again.
I am not sure this will help but since it says This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native. it might be worth trying.

In my case, tcomb-form-native caused this error because it has not been updated for years. I hope this PR will be merged soon.
https://github.com/gcanti/tcomb-form-native/pull/605

1.Install patch-package into your project,
Install #react-native-picker/picker into your project,
go to node_modules\react-native\index.js
replace all
invariant(
false,
'DatePickerAndroid has been removed from React Native. ' +
"It can now be installed and imported from '#react-native-
community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-
datetimepicker/datetimepicker',
);
or
invariant(
false,
........ DatePicker ..........
);
to
return require('#react-native-picker/picker')
run npx patch-package react-native
rebuild your app and it will be work

i am developing an app with node js , it works perfectly locally but crashes anytime i try to upload it to heroku,it says cat find dotenv

i am developing an app with node js , it works perfectly locally but crashes anytime i try to upload it to heroku,it says Error: Cannot find module 'dotenv.i have installed it serval times and also updated my package but the problem continues,
this is my package.json
{
"name": "myapp",
"description": "a really cool app",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"engines": {
"node": "10.16.3",
"npm": "6.13.4"
},
"dependencies": {
"#mapbox/mapbox-sdk": "^0.9.0",
"body-parser": "^1.19.0",
"cookie-parser": "~1.4.4",
"debug": "~4.1.1",
"ejs": "~3.0.1",
"ejs-mate": "^3.0.0",
"express": "^4.17.1",
"express-session": "^1.17.0",
"faker": "^4.1.0",
"http-errors": "~1.7.3",
"method-override": "^3.0.0",
"mongoose": "^5.8.1",
"mongoose-paginate": "^5.0.3",
"morgan": "~1.9.1",
"passport": "^0.4.1",
"passport-local": "^1.0.0",
"passport-local-mongoose": "^5.0.1",
"serve-favicon": "^2.5.0"
},
"devDependencies": {
"dotenv": "^8.2.0",
"locus": "^2.0.4"
}
}
this is my Procfile
web: node app.js
this is my git ignore file
/node_modules
.DS_Store
/*.env

Try movin dotenv from 'devDependencies' to 'dependencies'
Anything that is needed to actually run your app (lets call it "in production"), should be in 'dependencies'.
Anything that you may need while eg testing can be installed to 'devDependencies'

Unhandled JS Exception: Unexpected identifier '_Object$defineProperty'. Import expects exactly one argument

Description:
I'm getting a very vague error when I run my project (that was previously working), I'm guessing at this point that it has nothing to do with my project.
After spending most of the day yesterday trying to figure it out, I realized that react-native had updated itself.
What I've tried:
After cleaning the project with the various tools, I got rid of another error which was causing the project to fail during the build process (react-native run-ios).
yarn upgrade
yarn cache clean
react-native upgrade
rm -rf ios/build/; kill $(lsof -t -i:8081); react-native run-ios
However, I'm still getting the same issues
There are also issues mentioned on the babel github that seem to talk about a similar issue:
https://github.com/babel/babel-loader/issues/195
Question
Why am I getting a vague error saying I have an unhandled js exception?
Files that are relative to the issue:
.babelrc
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy",
"transform-async-generator-functions",
"transform-object-rest-spread",
"transform-class-properties",
"transform-regenerator"]
}
react-native info
Environment:
OS: macOS High Sierra 10.13.5
Node: 9.5.0
Yarn: 1.6.0
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4670197
Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.4.1
react-native: 0.54.4 => 0.54.4
package.json
{
"name": "FluxRN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"mobx": "^5.0.2",
"mobx-react": "^5.2.3",
"moment": "^2.22.0",
"native-base": "^2.5.2",
"react": "^16.3.0-alpha.1",
"react-native": "0.54.4",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^1.5.9"
},
"devDependencies": {
"babel-jest": "22.4.3",
"babel-plugin-transform-async-generator-functions": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.3",
"react-test-renderer": "^16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}

To solve this problem, I had to upgrade my react and react-native dependencies to the latest version, which solved the problem.
{
"name": "FluxRN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"moment": "^2.22.0",
"native-base": "^2.5.2",
"react": "^16.3.1",
"react-native": "0.55.4",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^1.5.9"
},
"devDependencies": {
"babel-jest": "23.0.1",
"babel-preset-react-native": "4.0.0",
"jest": "23.1.0",
"react-test-renderer": "^16.3.1"
},
"jest": {
"preset": "react-native"
}
}

yo angular: Scaffolding issue, Which option to choose?

I am new to angular but currently trying to setup an angular project. I executed yo angular and after initial steps I ended up at place where its asking following question:
? Overwrite package.json? (ynaxdH)
y) overwrite
n) do not overwrite
a) overwrite this and all others
x) abort
d) show the differences between the old and the new
h) Help, list all options
Answer:
I am not sure what option to really use. This is a brand new project. So I choose the option d to get an understanding of the difference.
? Overwrite package.json? show the differences between the old and the new
removed added
{
"name": "client",
"private": true,
"devDependencies": {
"autoprefixer-core": "^5.2.1",
"grunt": "^0.4.5",
"grunt-angular-templates": "^0.5.7",
"grunt-concurrent": "^1.0.0",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-copy": "^0.7.0",
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-htmlmin": "^0.4.0",
"grunt-contrib-imagemin": "^1.0.0",
"grunt-contrib-jshint": "^0.11.0",
"grunt-contrib-uglify": "^0.7.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-filerev": "^2.1.2",
"grunt-google-cdn": "^0.4.3",
"grunt-jscs": "^1.8.0",
"grunt-newer": "^1.1.0",
"grunt-ng-annotate": "^0.9.2",
"grunt-postcss": "^0.5.5",
"grunt-svgmin": "^2.0.0",
"grunt-usemin": "^3.0.0",
"grunt-wiredep": "^2.0.0",
"jit-grunt": "^0.9.1",
"time-grunt": "^1.0.0",
"jshint-stylish": "^1.0.0"
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"test": "karma start test/karma.conf.js"
}
}
basically following showed up as added:
},
"scripts": {
"test": "karma start test/karma.conf.js"
}

I'm guessing what you did was run the generator without having installed all the necessary dependencies and so it created the package.json but exited halfway through.
There's really no harm in overwriting the package.json if you're starting a brand new project and haven't installed any dependencies yet.
The snippet of code that the generator is trying to install is actually a really handy feature of npm.
},
"scripts": {
"test": "karma start test/karma.conf.js"
}
"test" is a script that you can execute from the command line to run its associated task: "karma start test/karma.conf.js". This task will execute unit tests and tell you that your app is working as expected. You can read more about karma here: https://github.com/karma-runner/karma
You may also choose to write your own scripts, in which case you can put them next to this one, though I imagine you'll mostly be using grunt to run all of your tasks.
},
"scripts": {
"test": "karma start test/karma.conf.js",
"fun-script": "echo 'Hello world!"
}
I hope that helped :)