React-Native error: cannot find module 'metro-react-native-babel-preset'

Question

I upgraded my react version to 56, I have done clean set up. Now I'm facing with this issue and I have no idea how to solve that.

I even Installed this https://www.npmjs.com/package/babel-preset-react-native.

error: bundling failed: Error: Cannot find module 'metro-react-native-babel-preset' from 'D:\React\Snap'
    at Function.module.exports [as sync] (D:\React\Snap\node_modules\resolve\lib\sync.js:43:15)
    at resolveStandardizedName (D:\React\Snap\node_modules\@babel\core\lib\config\files\plugins.js:100:31)
    at resolvePreset (D:\React\Snap\node_modules\@babel\core\lib\config\files\plugins.js:57:10)
    at loadPreset (D:\React\Snap\node_modules\@babel\core\lib\config\files\plugins.js:76:20)
    at createDescriptor (D:\React\Snap\node_modules\@babel\core\lib\config\config-descriptors.js:135:21)
    at items.map (D:\React\Snap\node_modules\@babel\core\lib\config\config-descriptors.js:87:50)
    at Array.map (<anonymous>)
    at createDescriptors (D:\React\Snap\node_modules\@babel\core\lib\config\config-descriptors.js:87:29)
    at createPresetDescriptors (D:\React\Snap\node_modules\@babel\core\lib\config\config-descriptors.js:79:10)
 BUNDLE  [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

package.json

{
  "name": "SnapHaber",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "^0.56.0",
    "react-native-firebase": "^4.3.0"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "^5.0.2",
    "jest": "23.2.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"]
}

after npm i metro-react-native-babel-preset --save-dev :

   Loading dependency graph, done.
error: bundling failed: Error: [BABEL] D:\React\Snap\index.js: .overrides is not allowed in preset options
    at Object.keys.forEach.key (D:\React\Snap\node_modules\@babel\core\lib\config\validation\options.js:71:13)
    at Array.forEach (<anonymous>)
    at validate (D:\React\Snap\node_modules\@babel\core\lib\config\validation\options.js:69:21)
    at instantiatePreset (D:\React\Snap\node_modules\@babel\core\lib\config\full.js:242:36)
    at cachedFunction (D:\React\Snap\node_modules\@babel\core\lib\config\caching.js:42:19)
    at loadPresetDescriptor (D:\React\Snap\node_modules\@babel\core\lib\config\full.js:233:45)
    at config.presets.map.descriptor (D:\React\Snap\node_modules\@babel\core\lib\config\full.js:68:19)
    at Array.map (<anonymous>)
    at recurseDescriptors (D:\React\Snap\node_modules\@babel\core\lib\config\full.js:66:38)
 BUNDLE  [android, dev] ..\..\../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

Answer 1

You have installed the wrong dependendcies, you have install react-native babel preset, try by installing correct dependencies i.e metro-react-native-babel-preset. You can install that by

npm i metro-react-native-babel-preset --save-dev

For more details refer this link - https://www.npmjs.com/package/metro-react-native-babel-preset