预设选项中不允许Babel改写反应本机导航

Question

我试图在react-native上向此入门项目添加一个路由器react native navigation v2，但是我遇到了与babel软件包有关的问题（可能是）。当我跑步

react-native run-android

我在Metro Bundler中遇到此错误：

加载依赖图，完成。：捆绑失败：错误：[BABEL] D：\ react-native \ projecti \ index.js：预设选项中不允许.overr ides

在Object.keys.forEach.key（D：\ react-native \ projecti \ node_modules \ metro \ node odules \ Obabel \ core \ lib \ config \ validation \ options.js：71：13）在Array.forEach（）在在实例化预设（D：\ react-native \ projecti \ node_modules \ metro \ node_modul s \ l @ babel \ core \ lib \ config \ full.js：242：36）在cachedFunction（D：\ react-native \ projecti \ node_modules \ metro \ node_modules \ babel \ core \ lib \ config \ caching.js ：42：19）在config.presets.map.descriptor（D：\ react-native \ projecti \ node_modules \ metro \ node_mo Iules \ ftabel \ core \ lib \ config \ full.js：233：45） ：\ react-本机\ projecti \ node_modules \ metr I \ node_modules \ ftabel \ core \ lib \ config \ full.js：68：19）在Array.map（）在recurseDescriptors（D：\ react-本机\ projecti \ node_modules \ metro \ node_modu les \ Obabel \ core \ lib \ config \ full.js：66：38）

在控制台中构建成功结束。

我的package.json

{
  "name": "project1",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "react": "16.5.0",
    "react-native": "0.56",
    "react-native-navigation": "^2.0.2569"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23",
    "babel-preset-react-native": "^5",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.47.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

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

Answer 1

It seems that you have RN 0.56 which used some beta versions of babel.

I see you have 2 solutions:

1) Keep RN 0.56 and set correct babel deps

For RN 0.56 you need to ensure all the @babel/* deps are fixed at version 7.0.0-beta.47 (Please see the change log of 0.56 for those)

2) Upgrade your project to RN 0.57

To be able to use latest babel 7 dependencies you will have to migrate your project to RN 0.57.

This is what I have for a 0.57.1 project:

"dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.1",
    .......
  }

  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    .....

}

Important: update .babelrc configuration to:

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

More info about RN 0.56, 0.57 change log here:

https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md

More info about babel 7 deps here:

https://new.babeljs.io/docs/en/next/v7-migration.html#versioning-dependencies-blog-2017-12-27-nearing-the-70-releasehtml-peer-dependencies-integrations https://github.com/babel/babel-upgrade

More info about upgrading a RN project to babel 7 here:

React native upgrade from babel 6 to babel 7

注意：在修改babel版本之后，请确保删除所有node_modules并重新安装它们并清理本地缓存。

rm -rf $TMPDIR/react-*; rm -rf $TMPDIR/haste-*; rm -rf $TMPDIR/metro-*; watchman watch-del-all