mobx: React Native + MobX: "RangeError: Maximum call stack size exceeded" when using @computed

I have a React Native project that uses MobX 5 (with the help of @babel/plugin-proposal-decorators and forced to the latest version of jsc-android). I have a very simple app that worked just fine until I added a @computed property. Here are the details:

Provide error messages including stacktrace Screenshot of red error screen: https://photos.app.goo.gl/aMNR7dAFtuUCehg97

Provide a minimal sample reproduction.

// @flow

import React, {Component} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {observable, computed} from 'mobx';
import {observer} from 'mobx-react';

type Props = {}
export default @observer class App extends Component<Props> {
  @observable num = 0;

  constructor(props: Props) {
    super(props);
    setInterval(() => this.num++, 1000);
  }

  @computed get postfix() {
    return this.num === 1 ? 'second' : 'seconds';
  }

  render() {
    return (
      <View>
        <Text>{this.num} {this.postfix} have passed.</Text>
      </View>
    );
  }
}

And follow the instructions here for configuring jsc-android.

Elaborate on your issue. What behavior did you expect? The exact same behavior as when omitting the @computed.
Did you check this issue wasn’t filed before? Yes. I found some issues with a similar error, but the conditions were different (one issue was almost identical except it occurred on MobX 4, and resolved by updating to 4.1. I am using MobX 5.

State the versions of MobX and relevant libraries. Which browser / node / … version?

react-native: 0.56.0
mobx: 5.1.0
mobx-react: 5.2.5
@babel/plugin-proposal-decorators: 7.0.0-beta.47
jsc-android: 224109.1.0

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (8 by maintainers)

Most upvoted comments

@mweststrate I can’t get the linked solution to work with RN 0.57 at all, despite a completely fresh project. The main difference being that the proposed solution uses an earlier RC of 0.57, which in turn uses babel 7 beta 47. Stable RN 57 uses stable babel 7, and no amount of tweaking the different versions of the packages got it working for me.

index.js


import applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import initializerDefineProperty from "@babel/runtime/helpers/esm/initializerDefineProperty";
import { AppRegistry } from "react-native";

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

AppRegistry.registerComponent("rn57", () => require("./App").default);

package.json

{
  "name": "rn57",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "tsc": "tsc"
  },
  "dependencies": {
    "@babel/plugin-proposal-decorators": "7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
    "@babel/plugin-transform-runtime": "7.0.0",
    "@babel/runtime": "7.0.0",
    "jsc-android": "^224109.1.0",
    "mobx": "^5.1.1",
    "mobx-react": "^5.2.8",
    "react": "16.5.1",
    "react-native": "0.57.0"
  },
  "devDependencies": {
    "@types/jest": "^23.3.2",
    "@types/react": "^16.4.14",
    "@types/react-native": "^0.56.19",
    "@types/react-test-renderer": "^16.0.2",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.45.3",
    "react-test-renderer": "16.5.1",
    "typescript": "^3.0.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "env": {
    "development": {
      "presets": ["module:metro-react-native-babel-preset"],
      "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        "@babel/plugin-proposal-object-rest-spread",
        [
          "@babel/plugin-transform-runtime",
          {
            "helpers": true,
            "regenerator": false
          }
        ]
      ]
    },
    "production": {
      "presets": ["module:metro-react-native-babel-preset"],
      "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
    }
  }
}

jakst on Sep 17, 2018

Still running into the same issue, Mobx version: 5.1.2

`{
  "name": "Compras",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "mobx": "^5.1.2",
    "mobx-react": "^5.2.8",
    "native-base": "^2.8.0",
    "react": "16.5.2",
    "react-native": "0.57.1",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^2.16.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "5.0.2",
    "jest": "23.6.0",
    "jsc-android": "^224109.1.0",
    "metro-react-native-babel-preset": "^0.45.6",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}
`

` React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
      Memory: 654.92 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.12.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 9.2/9C40b - /usr/bin/xcodebuild
    npmPackages:
      react: 16.5.2 => 16.5.2 
      react-native: 0.57.1 => 0.57.1 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
`

Code:

` @computed get emptyListFallbackText() {
        return this.searchHistory.length === 0 ? 'Busque Ahora!' : `No encontramos ningun resultado para "${this.searchHistory[this.searchHistory.length - 1]}"`
    }`

bauti-defi on Oct 3, 2018

@mweststrate That issue does not seem at all related. Do you mean #1546?

Either way, that is not the same problem. Even a simple computed property like below causes the same error. Verified with latest react-native 0.57.0 stable.

@observer
export default class App extends Component {
  @observable
  a = 1;

  @observable
  b = 2;

  @computed
  get c() {
    return this.a + this.b;
  }

  render() {
    return (
      <View>
        <Text>
          {this.a} plus {this.b} equals {this.c}
        </Text>
      </View>
    );
  }
}

jakst on Sep 13, 2018