React-native: upgrade to react native 0.57 throws error

[adirzoari]

Environment

  React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
      Memory: 4.52 GB / 15.91 GB
    Binaries:
      Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.3.0 - C:\Program Files\nodejs\npm.CMD

Description

I upgraded from react-naitve 0.55.4 to react-native 0.57.0 and I get this error
bundling failed: Error: The 'decorators' plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you are migrating from Babylon/Babel 6 or want to use the old decorators proposal, you should use the 'decorators-legacy' plugin instead of 'decorators'.

my package .json

`{
  "name": "APP_PROJECTXXX",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "appcenter": "^1.8.1",
    "appcenter-analytics": "^1.8.1",
    "appcenter-crashes": "^1.8.1",
    "lodash": "^4.17.10",
    "mobx-react-navigation-store": "^1.4.4",
    "moment": "^2.22.2",
    "react": "16.5.0",
    "react-native": "^0.57.0",
    "react-native-config": "^0.11.5",
    "react-native-confirmation-code-input": "^1.0.4",
    "react-native-datepicker": "^1.7.2",
    "react-native-device-info": "^0.22.5",
    "react-native-iphone-x-helper": "^1.1.0",
    "react-native-map-link": "^2.1.0",
    "react-native-onesignal": "^3.2.6",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^1.0.0-beta.21"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-jest": "22.4.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.7.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "<rootDir>\\node_modules\\appcenter\\test\\AppCenterMock.js",
      "<rootDir>\\node_modules\\appcenter-analytics\\test\\AppCenterAnalyticsMock.js",
      "<rootDir>\\node_modules\\appcenter-crashes\\test\\AppCenterCrashesMock.js"
    ]
  }
}

`

[hahtml]

Notice that RN0.57 uses babel 7. You need to do some migration stuff using babel-upgrade tool.
https://github.com/babel/babel-upgrade
Also, babel-plugin-transform-decorators-legacy is renamed to @babel/plugin-proposal-decorators
with a legacy flag in babel.rc file.

[adirzoari]

hey, what do you mean legacy in babel.rc? can you show me example what to do please? I stuck for some hours

[hahtml]

could u show me your babel.rc file? Also, you need to use metro-react-native-babel-preset instead of react-native in preset config. See the description https://www.npmjs.com/package/babel-preset-react-native

[adirzoari]

my babel.rc
{ "presets": ["react-native"], "plugins": ["transform-decorators-legacy"] }

[hahtml]

@adirzoari Try to use https://github.com/babel/babel-upgrade to migrate to babel 7. It will do everything for u.

[react-native-bot]

We are using GitHub issues exclusively to track bugs in React Native. GitHub may not be the ideal place to ask a question, but you can try asking over on Stack Overflow, or on Reactiflux. You may also use discuss.reactjs.org/ to discuss best practices.

[yaoyingjiang]

@adirzoari do you solve this issue? i have same an issue

[adirzoari]

yes. my problem was that I removed node_modules and then installed with npm and not in yarn. so I deleted package_lock.json and install with yarn install

[McMainsLiam]

Here is what I did to fix the issue; I hope it can help someone else!

First install the new proposal decorators with npm install @babel/plugin-proposal-decorators --save-dev or yarn add @babel/plugin-proposal-decorators --dev

Then, inside of your .babelrc file, change this:

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

To this:

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-flow"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy" : true }]
  ]
}

EDIT:

After you've updated your .babelrc file, make sure to add preset-flow as well with the command yarn add @babel/preset-flow --dev or npm install @babel/preset-flow --save-dev

Thanks @dileepbolisetti!

[dileepbolisetti]

@spiritman110 i had to run "yarn add@babel/preset-flow" after the steps you mentioned. (y)

[ahmdsdk]

I've just updated to react-native 0.57 and got the same error. I tried all that is mentioned above (tried the babel upgrade tool on the link https://github.com/babel/babel-upgrade also tried @spiritman110 solution, but I'm still getting the same error.

This is my updated package.json file:

"dependencies": {
    "mobx": "^4.2.0",
    "mobx-react": "^5.2.2",
    "react": "16.3.0",
    "react-native": "^0.57.4"
 },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/preset-flow": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.4.2",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.0"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  },
  "jest": {
    "preset": "react-native"
  }

and this is my updated .babelrc file:

{
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-flow"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy" : true }]
  ]
}

I deleted node modules and used yarn to install.

yarn -v 1.12.1
node -v 11.0.0
npm -v 6.4.1

Can anyone tell me what am I missing here? Any help would be appreciated.

[lironhl]

@ahmdsdk you need to download metro-react-native-babel-preset

npm i metro-react-native-babel-preset