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

[thathexa]

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
  
  

[paul-homeward]

Also experiencing this issue

[mweststrate]

Can someone set up a babel project that uses the same babel version as RN, for example based on https://github.com/mobxjs/mobx-react-boilerplate? Sounds as something that could relate to the beta version of babel used in RN 0.56

[mweststrate]

See also #546, issue seems to be related the latest RN version, and a solution can be found in the bottom of the thread.

[Jakst]

@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>
    );
  }
}

[mweststrate]

Sorry, linked to the wrong repo: https://github.com/mobxjs/mobx-react/issues/546, there is a solution linked
near the end

[mweststrate]

@Jakst @thathexa did the linked issue solve the problem for you as well?

[Jakst]

@mweststrate Do you mean this? https://github.com/oblador/react-native-vector-icons/issues/801#issuecomment-409268915

I won't be able to try until monday, but I can't find any mention of @computed. Is it @babel/plugin-transform-runtime that is supposed to solve it?

[mweststrate]

Yes, afaik the problem is only introduced in RN 0.56 and never appeared
before, and that again is related to the babel version it ships with

Op vr 14 sep. 2018 om 16:01 schreef Jakob Ståhl [e-mail]:

@mweststrate https://github.com/mweststrate Do you mean this? oblador/react-native-vector-icons#801
(comment)
https://github.com/oblador/react-native-vector-icons/issues/801#issuecomment-409268915

I won't be able to try until monday, but I can't find any mention of
@computed. Is it @babel/plugin-transform-runtime that is supposed to
solve it?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1708#issuecomment-421367708, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhDuogSIAPfIrpeNdjqa5lIdJ_wlMks5ua7acgaJpZM4WUbho
.

[Jakst]

We've had no problems with 0.56. It wasn't until attempting an upgrade to 0.57 that the problem appeared. Of course it could be more about the specific babel plugins that we use rather than the RN version.

[thathexa]

@mweststrate I will try the linked solution ASAP - seems promising...

[Jakst]

@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 }]]
    }
  }
}

[mshibl]

I'm running into the same issue -- for me, this issue started happening only after upgrading from MobX 4.3.0 --> 5.1.2

I tried different combinations of intermediate versions and nothing worked so I fell back to MobX 4.3.0

I also noticed that only @computed values defined inside of a React.Component instance seem to be causing the error -- otherwise works fine on plain classes (ex. store)

Dependencies

    "dependencies": {
        "mobx": "^5.1.2",
        "mobx-react": "^5.2.8",
        "react": "16.5.0",
        "react-native": "0.57.0"
    },
    "devDependencies": {
        "metro-react-native-babel-preset": "^0.46.0",
        "@babel/core": "7.1.0",
        "@babel/plugin-proposal-decorators": "^7.1.0",
        "babel-plugin-transform-react-jsx-source": "^6.22.0",
        "@babel/runtime": "7.0.0",
        "babel-eslint": "^8.2.3",
        "babel-jest": "^23.4.2",
        "jest": "^23.5.0",
        "jest-fetch-mock": "^1.6.5",
        "jest-react-native": "^18.0.0",
        "react-dom": "^16.4.2",
        "react-test-renderer": "^16.4.2",
        "schedule": "0.4.0",
    }

side note: I had to install "schedule": "0.4.0" to solve another upgrade-related issue: https://github.com/facebook/react-native/issues/21150#issuecomment-422560192

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "env": {
    "development": {
        "plugins": [
            ["@babel/plugin-transform-runtime"],
            ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": false }]
        ]
    }
  }
}

[mweststrate]

Note that legacy: true must still be set for plugin-proposal-decorators

Op wo 26 sep. 2018 om 00:54 schreef Mohamed Shibl <[email protected]

:

I'm running into the same issue -- for me, this issue started happening
only after upgrading to MobX 5.1.2 from MobX 4.3.0

I tried different combinations of intermediate versions and nothing worked
so I fell back to MobX 4.3.0

I also noticed that only @computed values defined inside of a
React.Component instance seem to be causing the error -- otherwise works
fine on plain classes (ex. store)

Dependencies

"dependencies": {
    "mobx": "^5.1.2",
    "mobx-react": "^5.2.8",
    "react": "16.5.0",
    "react-native": "0.57.0"
},
"devDependencies": {
    "metro-react-native-babel-preset": "^0.46.0",
    "@babel/core": "7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "babel-plugin-transform-react-jsx-source": "^6.22.0",
    "@babel/runtime": "7.0.0",
    "babel-eslint": "^8.2.3",
    "babel-jest": "^23.4.2",
    "jest": "^23.5.0",
    "jest-fetch-mock": "^1.6.5",
    "jest-react-native": "^18.0.0",
    "react-dom": "^16.4.2",
    "react-test-renderer": "^16.4.2",
    "schedule": "0.4.0",
}

.babelrc

{
"presets": ["module:metro-react-native-babel-preset"],
"env": {
"development": {
"plugins": [
["@babel/plugin-transform-runtime"],
["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": false }]
]
}
}
}

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1708#issuecomment-424528512, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhF6kj6TcffKerJYrw1wgne7GAufDks5uerQfgaJpZM4WUbho
.

[Bautista-Baiocchi-lora]

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]}"`
    }`

[mweststrate]

Closing, as to many individual reports are now mixed into one thread.

Please note that the correct configuration for babel 7 is:

{
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

For any future reports of this issue, please open a new issue _including reproduction_

[mweststrate]

See #1777 for details, but a fix has been released in 5.7.0