15

What would be the steps to upgrade from babel 6 to babel 7 an existing react-native project?

These are the old dependencies:

 "dependencies": {
    .........
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "prop-types": "^15.5.10",
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-redux": "5.0.7",
    "redux": "^4.0.0",
    "redux-actions": "^2.6.1",
    "redux-mock-store": "^1.5.1",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.1.0",
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "^4.18.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-flowtype": "^2.46.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "^7.4.0",
    "gulp": "^3.9.0",
    "gulp-eslint": "4.0.2",
    "gulp-mocha": "6.0.0",
    "jest": "^23.5.0",
    .....
  },

What steps do you have to follow to make this update? How should the new dependencies looks like?

It is not very clear for me (after reading the babel doc) what I should do to make this upgrade, commands to run and what should be added in dependencies and what in devDependencies.

Also it is not very clear for me what is the difference between babel 6 and babel 7 regarding what is happening with the JS code in a react-native project.

Please don't respond with just links to babel doc or to react-native 0.57 change log.

I would need at least some basic steps to do this upgrade and an example of a package.json of a RN project based on babel 7.

Florin Dobre
  • 9,872
  • 3
  • 59
  • 93

3 Answers3

7

Short answer:

run npx babel-upgrade

(then you can take a look in package.json to check what changed)

Long answer:

For RN 0.57.x after reading the babel and babel-upgrade docs I realized it was enough to have all the old babel dependencies inside devDependencies for my project:

"dependencies": {
    .........
    "react": "16.3.1",
    "react-native": "0.55.4",
 },

"devDependencies": {
   "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "react-native": "0.55.4",
    "babel-eslint": "^8.2.2",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-react-native": "^4.0.0",
    "babel-preset-react-native-stage-0": "^1.0.1",        
    .....
  },

1) I used npx and babel-upgrade (npx is already included in npm versions >= 5.2.0) If you have older npm versions you have to install npx globally.

npx lets you run babel-upgrade without installing it locally.

2) I ran npx babel-upgrade ( without the --write option) to see how the upgrade will affect my package.json deps)

3) I ran npx babel-upgrade --write

4) I set RN version to 0.57.1 and changed the babel-preset dependency from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "^0.45.0",and .babelrc configuration to:

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

as written in the RN change log instructions.

Now package.json looks like this:

  "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",
    .....

}

I am not sure if all the new dependencies added by gradle-upgrade are needed but the project builds and runs ok for both android and ios.

If you find a better solution or improvements for this babel update please add a comment or add a new answer, I will be happy to update my answer or accept a new better one.

Sources:

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

https://github.com/babel/babel-upgrade

For RN 0.58.6 I noticed I do not need so many babel deps. I noticed this creating a new project with a react-native init command.

My package.json file looks now like this:

{
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.6",
    // ....

  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.6.3",
    // .... 

  },
  "jest": {
    "preset": "react-native", 
   // ...
  }

}

NOTE: For IOS: I was able to build it in IOS without any react/react-native deps in pod file. I added/re-added those inside Linked Frameworks and Libraries section

Florin Dobre
  • 9,872
  • 3
  • 59
  • 93
  • Why so many babel dependencies? what mean `devDependency` and `dependencies` – Khemraj Sharma Oct 12 '18 at 08:27
  • "Why so many babel dependencies?" because babel has a lot of dependecies :P "devDependency" - stuff only used during development time "dependencies" - stuff used at application run time – boogie666 Jan 22 '19 at 14:04
6

Use babel-upgrade.

You can try using babel-upgrade in order to automatically upgrade your Babel dependencies.

It's very easy to use, even without installing it globally.

I recommend having a clean working directory (no unstaged changes) and simply run the following command: 

npx babel-upgrade --write

This will update your package.json and your .babelrc files with the correct Babel versions and packages.

The --write command just tells the tool to save the changes to disk. That's why I suggested having a clean working directory so you can review the changes with git diff. If you omit --write it will just show the desired changes in the console.

You can see more information at https://github.com/babel/babel-upgrade.

Joshua Pinter
  • 45,245
  • 23
  • 243
  • 245
  • I said same things in my answer from below :) – Florin Dobre Mar 20 '19 at 07:49
  • 1
    @FlorinDobre :) Yes, I think I spotted that but got lost a bit with your answer. I wanted to post something more succinct for others landing here. I hope you're not offended. :) – Joshua Pinter Mar 20 '19 at 23:43
  • 1
    No worries, I re-edited my answer but I think it's better for community to have answer like your yours too. They are a reminder to keep things as simple as possible and can save time for users that don't want details :) – Florin Dobre Mar 21 '19 at 09:47
  • @FlorinDobre Absolutely. But I like keeping your original answer as well, for posterity and historic purposes. :+1: – Joshua Pinter Mar 21 '19 at 14:42
0

For anyone having this problem in 2021 : npm install --save-dev @babel/core @babel/cli

anddmn
  • 1