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

[markopencast]

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.

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

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

[markopencast]

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.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[thtRajasthaniGuy]

+1

[RoseReatherford]

+1

[alicja-mruk]

any solution?

[AgentGoldPaw]

any ideas?

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[lvndry]

Any updates ?

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[tickoosunny]

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.

[rupencxosync]

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

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[thomastibin]

anyone got the solution? Till yesterday I was able to run my react-native app, but today I am getting this error.. but i didnt do any updates in between

[rupencxosync]

I did multiple things before I got this working properly. Clearing cache definitely helps. Make sure the babel deps and config are correct. Go through babble docs carefully. Make sure you are using correct versions of eslint. Sometimes disabling eslint for some libraries helped. I removed eslint from devDependencies.

I'm not fully using expo. Using bare workflow.

babel.config.js: .... presets: [ "babel-preset-expo", ['module:metro-react-native-babel-preset'], ], plugins: [ ['@babel/plugin-proposal-decorators', { legacy: true }], ["@babel/plugin-proposal-private-methods", { loose: true }], ["@babel/plugin-proposal-private-property-in-object", { loose: true }], "react-native-reanimated/plugin", "@babel/plugin-transform-named-capturing-groups-regex", ],

metro.config.js ... transformer: { babelTransformerPath: require.resolve('metro-react-native-babel-transformer'), getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), }, maxWorkers: 2, resolver: { blocklistRE: blocklist([/ios\/Pods\/JitsiMeetSDK\/Frameworks\/JitsiMeet.framework\/assets\/node_modules\/react-native\/.*/]), // blackListRE: blackList, resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'], },

package.json ... "devDependencies": { "@babel/core": "^7.21.4", "@babel/plugin-proposal-decorators": "^7.21.0", "@babel/runtime": "^7.21.0", "@tsconfig/react-native": "^2.0.3", "babel-plugin-module-resolver": "^5.0.0", "metro-core": "^0.76.1", "metro-react-native-babel-preset": "^0.76.1",

[yudin-oleg]

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

1. In .eslintrc.js file write the next: module.exports = { root: true, parser: '@babel/eslint-parser', requireConfigFile: false, extends: '@react-native-community', };
2. In babel.config.js file write the next: module.exports = { presets: ['module:metro-react-native-babel-preset'], };
3. 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.

[Dhvani-Impero]

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

[AgentGoldPaw]

I basically spawned a new project copied over my source directory and everything worked just fine. rather than doing an upgrade.

[dg1223]

I have tried every solution that has been posted on this thread but nothing seems to work.

[dg1223]

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

[TalhaZubair-debuger]

Thanks, mate. It worked for me.

[jingfreeks]

as for me it will fix the issue when restart, but come back again when you again restart your pc

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[David-moonsite]

Any updates ?

[sandaun]

I'm still facing issues. Any updates? I do not find an explicit answer or solution to this problem.

[EyyupUlutas]

I don't know if it works for you, but it worked for me!

I deleted the .babelrc file.

Old version:

[cumthqb]

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

Thank you for sharing, it saved me a lot of time.

[lluisandreu]

I am experimenting this issue after upgrading to 0.75.2.

My babel file is:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      require.resolve("nativewind/babel"),
      "react-native-reanimated/plugin",
    ],
  };
};

Cleaning cache, deleting app and generating a new bundle didn't fix the issue.