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

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.

1. I have tried changing the port and resetting the cache but device cannot find the url to bundle.

2. this problem isn’t device specific as I get the same issue on android

3. 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.