CODEWITHSUNDEEP
react-nativebabeljsmobx
Mateo Hrastnik
Mateo Hrastnik

Reputation: 543

Configure a Create-React-Native-App project to use MobX and use Babel to enable decorators

I've created a project with CRNA and after some considerations I've decided to go with MobX for state management. MobX works best with the decorator syntax (most MobX documentation is written using the decorator syntax) so I wanted to install the Babel plugin enabling the use of decorators.

I've successfully installed MobX (yarn add mobx mobx-react), but after installing the Babel plugin to enable decorators (npm install --save-dev babel-plugin-transform-decorators and adding "transform-decorators" to the plugins section in .babelrc, yarn start stopped working throwing an error about react-native-scripts not being found.

I've then run yarn installand this time it threw an error saying

Error starting packager: TypeError: Invalid Version: undefined
    at new SemVer (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:279:11)
    at Function.major (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:551:10)
    at D:\xdl\src\project\Doctor.js:634:18
    at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4944:15
    at baseForOwn (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:3001:24)
    at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4913:18
    at Function.forEach (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:9359:14)
    at D:\xdl\src\project\Doctor.js:624:9
    at Generator.throw (<anonymous>)
    at step (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\xdl\build\project\Doctor.js:615:191)
error Command failed with exit code 1.

Does anyone have experience with CRNA and MobX? Any help is much appreciated!

Upvotes: 1

Views: 575

Answers (1)

Mateo Hrastnik
Mateo Hrastnik

Reputation: 543

I've solved it. Turns out that running npm install --save-dev babel-plugin-transform-decorators broke something. What I should have been running is yarn add --dev babel-plugin-transform-decorators-legacy and add "transform-decorators-legacy" to .babelrc plugins section. After doing those steps I ran yarn install and it fixed my project.

Additionally, my editor (VSCode) threw warnings about extensions being experimental so I added a jsconfig.json file to the root folder and added the following inside:

{
  "compilerOptions": {
     "experimentalDecorators": true
  },
  "exclude": [".expo/*", "node_modules/*"]
}

Upvotes: 4

Related Questions