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

Description

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:

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)?)/)"
    ]
  }
}

Version

0.70.1

Output of `npx react-native info`

System: OS: macOS 12.6 CPU: (8) arm64 Apple M1 Pro Memory: 702.89 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.14.2 - /usr/local/bin/node Yarn: Not Found npm: 8.5.0 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8309675 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: 18.0.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.1 => 0.70.1 react-native-macos: Not Found npmGlobalPackages:

Steps to reproduce

create project using react-native-cli create git repo push changes pull changes from different machine

Snack, code example, screenshot, or link to a repository

see above

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 27

Most upvoted comments

Got mine working. Problem was in the babel.config.js file. Removed the preset "@babel/preset-env" and reset expo cache.

Previous babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", "@babel/preset-env", "@babel/preset-react"],
    plugins: [
      ...
    ],
  };
};

Current babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", "@babel/preset-react"],
    plugins: [
      ...
    ],
  };
};

Took me hours…

Edit: To build using a clean expo cache, run npx expo start -c

+11

dg1223 on Jul 9, 2023

It was giving me the same mistake. For me the solution was the next:

In .eslintrc.js file write the next: module.exports = { root: true, parser: ‘@babel/eslint-parser’, requireConfigFile: false, extends: ‘@react-native-community’, };
In babel.config.js file write the next: module.exports = { presets: [‘module:metro-react-native-babel-preset’], };
Then restart the project with clearing the cache with the next command: npm start – --reset-cache

For me these steps solved the problem. Hope it can help others as well.

yudin-oleg on Jun 8, 2023

include the dev dependency: “metro-react-native-babel-preset”: “^0.76.1”,

include the preset.

presets: [
	'@babel/preset-env',
	'@babel/preset-react',
	'@babel/preset-typescript',
	'module:metro-react-native-babel-preset',
],

reset/clear the cache and run:

npx expo start -c --android

rupencxosync on Apr 9, 2023

I created a new project and put one by one folders and packages and its working fine

Dhvani-Impero on Jun 27, 2023

RoseReatherford on Jan 4, 2023

I am facing the same issue , looked here and it seems to be a babel config thig , but not sure exactly what causes it or how it can be resolved.

tickoosunny on Mar 21, 2023