core-decorators broken with react-native 0.57.1 and babel 7.0.0.

[kburnik]

I'm attempting to upgrade my project to react-native 0.57.1, due to a multitude of reasons and issues with the current versions of packages.

Seems core-decorators are broken by Babel 7 or something else is amiss.

I ran

react-native run-android

Same issue with run-ios on mac.

Essentially we only use @autobind on methods and these decorators seem not to work.

E.g.

import { autobind } from 'core-decorators';
export class MainScreen extends Component {
//...
  @autobind
  handleHardwareBackPress() {
  // ... doing stuff
  }
}

So this happens during runtime (i.e. the metro bundler finishes ok).

BTW, I tried using the replacement autobind-decorator package, but also get an error, seems Babel 7 isn't welcoming these decorators...

Any input would be appreciated.

My package.json

{
  "name": "my-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^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/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "7.1.2",
    "color": "3.0.0",
    "core-decorators": "0.20.0",
    "jwt-decode": "2.2.0",
    "lodash": "4.17.10",
    "lottie-react-native": "2.3.2",
    "moment": "2.22.2",
    "prop-types": "15.6.2",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-bluetooth-status": "1.3.0",
    "react-native-fast-image": "4.0.14",
    "react-native-fcm": "github:evollu/react-native-fcm#e7f0ad935b79acf9e729da8d707807356ff1e178",
    "react-native-firebase": "3.3.1",
    "react-native-input-scroll-view": "1.7.0",
    "react-native-keyboard-aware-scroll-view": "0.5.0",
    "react-native-permissions": "1.1.1",
    "react-native-render-html": "3.9.2",
    "react-native-splash-screen": "3.1.1",
    "react-navigation": "1.5.11",
    "react-navigation-redux-helpers": "1.1.2",
    "react-proxy": "1.1.8",
    "react-redux": "5.0.7",
    "redux": "3.7.2",
    "redux-freeze": "0.1.5",
    "redux-logger": "3.0.6",
    "redux-persist": "5.10.0",
    "redux-thunk": "2.3.0",
    "reselect": "^3.0.1",
    "urbanairship-react-native": "^1.6.2",
    "urijs": "^1.19.1",
    "validator": "^9.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.47.1",
    "react-test-renderer": "16.5.0",
    "redux-devtools-extension": "2.13.2",
    "redux-mock-store": "1.5.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

My .babelrc

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

BTW, this works just fine with old react-native, see my OLD package.json:

{
  "name": "my-project",
  "version": "2.0.6",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "./node_modules/.bin/jest --silent",
    "test:debug": "./node_modules/.bin/jest --debug",
    "test:watch": "npm test -- --watch --silent",
    "test:debug:watch": "npm test -- --watch",
    "test:e2e:init": "detox test -c ios.sim.release",
    "test:e2e:init:debug": "detox test -c ios.sim.debug --loglevel verbose",
    "test:e2e:build": "detox build -c ios.sim.release",
    "test:e2e:build:debug": "detox build -c ios.sim.debug",
    "test:e2e": "npm run test:e2e:build && npm run test:e2e:init",
    "test:e2e:debug": "npm run test:e2e:build:debug && npm run test:e2e:init:debug",
    "lint": "node_modules/.bin/eslint src/**/*.js",
    "setup-api": "node ./scripts/setup-api.js",
    "setup-meridian": "node ./scripts/setup-meridian.js",
    "setup-urbanairship": "node ./scripts/setup-urbanairship.js",
    "setup-e2e": "node ./scripts/setup-e2e.js",
    "setup-firebase": "node ./scripts/setup-firebase.js",
    "setup-push": "node ./scripts/setup-push.js",
    "setup": "npm run setup-api && npm run setup-meridian && npm run setup-urbanairship && npm run setup-e2e && npm run setup-firebase && npm run setup-push"
  },
  "dependencies": {
    "color": "^3.0.0",
    "core-decorators": "^0.20.0",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.10",
    "lottie-react-native": "^2.3.2",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.3.1",
    "react-native": "^0.55.3",
    "react-native-bluetooth-status": "^1.3.0",
    "react-native-fast-image": "^4.0.14",
    "react-native-fcm": "github:evollu/react-native-fcm#e7f0ad935b79acf9e729da8d707807356ff1e178",
    "react-native-firebase": "^3.3.1",
    "react-native-input-scroll-view": "^1.7.0",
    "react-native-keyboard-aware-scroll-view": "^0.5.0",
    "react-native-permissions": "^1.1.1",
    "react-native-render-html": "^3.9.2",
    "react-native-splash-screen": "^3.1.1",
    "react-navigation": "^1.5.11",
    "react-navigation-redux-helpers": "^1.1.2",
    "react-proxy": "^1.1.8",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-freeze": "^0.1.5",
    "redux-logger": "^3.0.6",
    "redux-persist": "^5.10.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^3.0.1",
    "urbanairship-react-native": "^1.6.2",
    "urijs": "^1.19.1",
    "validator": "^9.4.1"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "babel-jest": "22.2.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-native": "4.0.0",
    "detox": "7.3.5",
    "eslint": "^4.18.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.1",
    "expect": "^22.3.0",
    "jest": "22.4.4",
    "jest-fetch-mock": "^1.4.2",
    "react-test-renderer": "16.2.0",
    "redux-devtools-extension": "^2.13.2",
    "redux-mock-store": "^1.5.1"
  },
  "detox": {
    "specs": "e2e",
    "test-runner": "jest",
    "runner-config": "tests/e2e/config.js",
    "configurations": {
      "ios.sim.debug": {
        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/my-project.app",
        "build": "xcodebuild -workspace ios/my-project.xcworkspace -scheme my-project -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 8 Plus"
      },
      "ios.sim.release": {
        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/my-project.app",
        "build": "xcodebuild -workspace ios/my-project.xcworkspace -scheme my-project -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
        "type": "ios.simulator",
        "name": "iPhone 7"
      }
    }
  },
  "rnpm": {
    "assets": [
      "src/modules/ui/assets/fonts/"
    ]
  }
}

Please let me know if you had and resolved the issue or have a suggestion on how to approach this.

[tech-silver]

any solution for this ?

[kburnik]

It's been a while since I've worked with react-native and babel. As I recall, I fixed my problem by removing all autobind annotations and binding all the methods in the constructor manually.
I used a python script and some regex magic to do most of the replacements.

[tech-silver]

Thank you!

I am using RN 0.61.5, react 16.9.0, and I solve the problem by adding this line to babel.config.js
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}]
}
Actually I got a clue from your babel.rc file configuration @kburnik posted here.

[kburnik]

Glad it helped. :-)

P.S. I think I had tinkered around with what you suggested but that didn't work out. That's why after a few hours, I decided to remove autobind.