How to use mobx in react-native 0.56 (Babel 7) with Decorators

Question

i've upgraded my RN app from 0.55.4 to 0.56 that use Babel 7.

In 0.55.4 to use decorators for MOBX i use "babel-plugin-transform-decorators-legacy" but is not compatible with Babel 7...

react-native ver: 0.56.0 mobx ver: 5.0.3 mobx-react ver: 5.2.3

does anyone have the solution?

Thanks

UPDATE:

The app works in DEBUG with this configuration

package.json

...
"devDependencies": {
    "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47"
    ...
}

.babelrc

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

But in RELEASE xCode crash with this error:

babelHelpers.applyDecoratedDescriptor is not a function.

UPDATE 2, WORKING CONFIG:

This is my working configuration:

package.json

...
"devDependencies": {
   "@babel/core": "7.0.0-beta.47",
   "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
   "@babel/runtime": "7.0.0-beta.47",
   "babel-jest": "23.2.0",
   "babel-preset-react-native": "5.0.2",
   "jest": "23.3.0",
   "react-test-renderer": "16.4.1"
}
...

.babelrc

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

Then in the index.js (main app starting file) i need to import the decorators babel libraries:

index.js

import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor';
import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty';

Object.assign(babelHelpers, {applyDecoratedDescriptor, initializerDefineProperty});

require('./app.js');

app.js

import {AppRegistry} from 'react-native';
import AppName from './app/index';

AppRegistry.registerComponent(appName, () => AppName);

There is this `@babel/plugin-transform-decorators` package but it does not help either. What's even weirder with that is, my problem exists only when I build for `Release` config. `Debug` builds work just fine. — Hkan, Jul 06 '18 at 15:09
@Hkan i've tried `@babel/plugin-transform-decorators` too but i riceve same errors... Debug and Release too... — Alessandro Bottamedi, Jul 06 '18 at 16:30
I think I solved this by installing the exact same version of `@babel/plugin-transform-decorators` with `@babel/core`. — Hkan, Jul 06 '18 at 19:28
Ok with `@babel/plugin-transform-decorators@7.0.0-beta.47` build working in `Debug` but in `Release` app crash, error on xcode is: `babelHelpers.applyDecoratedDescriptor is not a function.`. some advice? — Alessandro Bottamedi, Jul 08 '18 at 08:45
@shinriyo i've updated the question with my working configuration... — Alessandro Bottamedi, Oct 07 '18 at 11:50

Alessandro Bottamedi · Accepted Answer · 2018-07-09T14:08:58.407

11

Ok, i solved all the errors by adding @babel/runtime, now the app works in DEBUG and RELEASE too.

Here the correct configuration:

package.json

...
"devDependencies": {
  "@babel/core": "7.0.0-beta.47",
  "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
  "@babel/plugin-transform-runtime": "7.0.0-beta.47",
  "@babel/runtime": "7.0.0-beta.47",
  "babel-jest": "23.2.0",
  "babel-preset-react-native": "5.0.2",
  "jest": "23.3.0",
  "react-test-renderer": "16.4.1"
}
...

.babelrc

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

Thanks @Hkan.

edited Jul 09 '18 at 14:08

answered Jul 08 '18 at 18:13

Alessandro Bottamedi

423
5
15

Turns out, I installed `@babel/runtime` as well. It is implicitly the default value of `moduleName` property for `@babel/plugin-transform-runtime`. See [`@babel/plugin-transform-runtime` documentation](https://babeljs.io/docs/en/next/babel-plugin-transform-runtime.html) for further information. – Hkan Jul 08 '18 at 19:17
Works like a Charm !! – Aswin Mohan Jul 10 '18 at 01:08
2

im getting this error now, `[tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating 'e.default')` – Fahid Mohammad Sep 09 '18 at 07:24
I removed babel family and yarn add again. 7.0.0-beta.47 is good? but not good. It doesn't work! – shinriyo Oct 04 '18 at 13:52
I having the same error that @FahidMohammad, did you fixed it? – Yago Azedias Jun 14 '19 at 12:22

score 1 · Answer 2 · edited Jul 08 '18 at 19:13

1

I solved this issue by installing @babel/plugin-proposal-decorators@7.0.0-beta.47 and @babel/plugin-transform-runtime@7.0.0-beta.47.

Versions might change for you. I used those versions because @babel/core was also at 7.0.0-beta.47.

Current .babelrc is:

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

edited Jul 08 '18 at 19:13

Aswin Mohan

630
1
8
20

answered Jul 08 '18 at 10:19

Hkan

2,973
1
21
25

Thanks, i receve another error `Unable to resolve module @babel/runtime/helpers/interopRequireDefault` can you share your package.json devDependencies? – Alessandro Bottamedi Jul 08 '18 at 15:13
Did the steps mentioned and I ran into the same error as @AlessandroBottamedi – Aswin Mohan Jul 08 '18 at 16:51
mine @babel/plugin-proposal-decorators": "^7.1.0", – shinriyo Oct 04 '18 at 13:47

How to use mobx in react-native 0.56 (Babel 7) with Decorators

2 Answers2

Linked