CODEWITHSUNDEEP
javascriptreactjsreact-nativebabeljs
quartaela
quartaela

Reputation: 2757

bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/workspace/reactnative''

I updated react-native to v0.57 and react-native run-ios is failing. I replaced babel-preset-react-native with metro-react-native-babel-preset as suggested in https://www.npmjs.com/package/babel-preset-react-native. here is the error stack trace I am getting.

error: bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/Users/buraktas/workspace/reactnative'
- If you want to resolve "react-native", use "module:react-native"
    at Function.module.exports [as sync] (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/node_modules/resolve/lib/sync.js:58:15)
    at resolveStandardizedName (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePreset (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/lib/config/files/plugins.js:58:10)
    at loadPreset (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/lib/config/files/plugins.js:77:20)
    at createDescriptor (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/buraktas/workspace/reactnative/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)

package.json

{
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  },
  "dependencies": {
    "axios": "^0.17.1",
    "moment": "^2.20.1",
    "moment-timezone": "^0.5.14",
    "react": "16.2.0",
    "react-native": "^0.57.8",
    "react-native-branch": "^2.3.0",
    "react-native-camera": "^1.0.0",
    "react-native-datepicker": "^1.6.0",
    "react-native-deep-linking": "^2.1.0",
    "react-native-fabric": "^0.5.1",
    "react-native-keyboard-aware-scroll-view": "^0.4.3",
    "react-native-modal": "^4.1.1",
    "react-navigation": "^1.0.0-beta.22",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-form": "^7.1.2",
    "redux-saga": "^0.16.0",
    "stripe-client": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.4.2",
    "babel-preset-airbnb": "^3.2.0",
    "detox": "^9.0.4",
    "eslint": "^5.12.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.12.3",
    "eslint-plugin-react-native": "^3.6.0",
    "jest-cli": "^23.6.0",
    "metro-react-native-babel-preset": "^0.51.1",
    "react-test-renderer": "16.0.0",
    "remote-redux-devtools": "^0.5.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": [
    "airbnb",
    "@babel/preset-env",
    "module:react-native",
    "module:metro-react-native-babel-preset"
  ]
}

Upvotes: 3

Views: 9046

Answers (2)

Ibtesam Latif
Ibtesam Latif

Reputation: 698

Deleting .babelrc file will fix this for you.

Please check react native upgrade helper

https://react-native-community.github.io/upgrade-helper

and specify your current React native version and the version to update (0.57 in your case)

You will see changes need to do in your case to make the code compatible with updated version

enter image description here

Upvotes: 6

Andrew
Andrew

Reputation: 28539

Looking at your package.json it looks like all you have done is upgrade the version of react-native to the latest version.

Unfortunately it is not as simple as changing the version number in the package.json. You don't state which version of react-native you were using before, but as you are using React 16.2.0 I would hazard a guess that you were on react-native 0.52 or 0.53.

To upgrade you should look at the diff that is provided between your version and the version that you upgrading to. rn-diff-purge shows the changes between that need to be performed. For upgrading 0.52.0 to 0.57.8 you can see the changes here, for 0.53.0 to 0.57.8 you can see the changes here.

You can check the changelog https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md to see more specific requirements for upgrading between the versions.

It is also worthwhile looking at https://facebook.github.io/react-native/docs/upgrading for tips on how to perform an upgrade.

Upvotes: 1

Related Questions