捆绑失败：错误：无法从'/ workspace / reactnative找到模块'babel-preset-react-native'

Question

我将react-native更新为v0.57，并且react-native run-ios失败了。我按照https://www.npmjs.com/package/babel-preset-react-native中的建议用babel-preset-react-native替换了metro-react-native-babel-preset。这是我得到的错误堆栈跟踪。

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"
  ]
}

Answer 1

看着您的package.json，您似乎所做的一切就是将react-native的版本升级到最新版本。

不幸的是，它并不像更改package.json中的版本号那样简单。您没有说明以前使用的是什么版本的react-native，但是当您使用React 16.2.0时，我可能会猜测您使用的是react-native 0.52或0.53。

要升级，您应该查看您的版本与升级到的版本之间提供的差异。 rn-diff-purge显示了需要执行的更改。要将0.52.0升级到0.57.8，您可以看到更改here，对于将0.53.0升级到0.57.8，您可以看到更改here。

您可以查看变更日志https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md，以了解在版本之间进行升级的更多具体要求。

值得一提的是https://facebook.github.io/react-native/docs/upgrading，以获取有关如何执行升级的提示。

Answer 2

删除.babelrc文件将为您解决此问题。

请检查反应本机升级助手

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

并指定您当前的React本机版本和要更新的版本（在您的情况下为0.57）

您将看到需要做的更改，以使代码与更新的版本兼容