Property 'require' doesn't exist react native metro bundler - reactjs

Question

This issue has to do with the metro bundler not being able to bundle the JS to the device. I run npm run start and it shows fine on the browser (i.e. 'I browse to http://localhost:8081) However, when I load npm run ios it fails with the following:
error Image
Also, I had a previously working project and then imported another project with this issue and is now causing the working project to fail.
I have tried changing the port and resetting the cache but device cannot find the url to bundle.
this problem isn't device specific as I get the same issue on android
I have tried deleting node modules and running npm install
any help?
{
"name": "venueApp",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.18.6",
"#babel/plugin-proposal-private-methods": "^7.18.6",
"#testing-library/react-native": "^11.2.0",
"babel-loader": "^8.2.5",
"formik": "^2.2.9",
"jest": "^29.1.1",
"react": "18.1.0",
"react-native": "0.70.1",
"react-native-safe-area-context": "^4.4.0",
"react-native-vector-icons": "^9.2.0"
},
"devDependencies": {
"#babel/core": "^7.19.3",
"#babel/preset-env": "^7.19.3",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "^26.0.23",
"#types/react-native": "^0.70.0",
"#types/react-native-vector-icons": "^6.4.12",
"#types/react-test-renderer": "^18.0.0",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "^26.6.3",
"eslint": "^7.32.0",
"metro": "^0.72.3",
"metro-core": "^0.72.3",
"metro-react-native-babel-preset": "^0.72.1",
"react-native-mock": "^0.3.1",
"react-test-renderer": "18.1.0",
"typescript": "^4.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native(-.*)?|#react-native(-vector-icons)?)/)"
]
}
}
Update:
What I have discovered is that the index.bundle file is different to that of the working project so not sure why metro is picking up a different file.

Answer 1

I had a similar issue.
I have no idea what fixed it but I had made changes to these files.
.watchmanconfig
babel.config.js
metro.config.js
I've since reverted the changes and it came back to life, but it could have been a combination of things including clearing gradle and removing node_modules etc.
Hopefully this will help you narrow down the problem.

Answer 2

any news? this bug doesn't seem related to react native, it fixes itself sometimes on mac reboot in my case! react-native 0.71.0.
I think it's a babel problem.
I posted the image of the metro bundle where there is the error! at:
var _typeof = require("#babel/runtime/helpers/typeof");