捆綁失敗：錯誤：無法從'/ 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

刪除.babelrc文件將為您解決此問題。

請檢查反應本機升級助手

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

並指定您當前的React本機版本和要更新的版本（在您的情況下為0.57）

您將看到需要進行更改以使代碼與更新版本兼容的情況

Answer 2

查看您的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可以看到的變化在這里 ，對於0.53.0至0.57.8你可以看到的變化在這里 。

您可以查看更改日志https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md，以查看版本之間升級的更多具體要求。

值得一看的是https://facebook.github.io/react-native/docs/upgrading以獲取有關如何執行升級的提示。