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

thathexa · 2018-08-31T00:45:35Z

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

The text was updated successfully, but these errors were encountered:

paul-paliychuk · 2018-09-04T09:23:09Z

Also experiencing this issue

mweststrate · 2018-09-04T11:34:06Z

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 · 2018-09-13T07:41:27Z

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 · 2018-09-13T14:14:21Z

@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 · 2018-09-13T15:27:33Z

Sorry, linked to the wrong repo: mobxjs/mobx-react#546, there is a solution linked
near the end

mweststrate · 2018-09-14T13:01:51Z

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

jakst · 2018-09-14T14:00:42Z

@mweststrate Do you mean this? oblador/react-native-vector-icons#801 (comment)

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 · 2018-09-14T14:31:19Z

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 <[email protected]>:

…

@mweststrate <https://github.com/mweststrate> Do you mean this? oblador/react-native-vector-icons#801 (comment) <oblador/react-native-vector-icons#801 (comment)> 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 <#1708 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhDuogSIAPfIrpeNdjqa5lIdJ_wlMks5ua7acgaJpZM4WUbho> .

jakst · 2018-09-14T14:46:05Z

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 · 2018-09-15T16:56:24Z

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

jakst · 2018-09-17T14:07:04Z

@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 · 2018-09-25T22:54:20Z

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: facebook/react-native#21150 (comment)

.babelrc

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

mweststrate · 2018-09-26T07:26:04Z

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", ***@***.***/core": "7.1.0", ***@***.***/plugin-proposal-decorators": "^7.1.0", "babel-plugin-transform-react-jsx-source": "^6.22.0", ***@***.***/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": [ ***@***.***/plugin-transform-runtime"], ***@***.***/plugin-proposal-decorators", { "decoratorsBeforeExport": false }] ] } } } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1708 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhF6kj6TcffKerJYrw1wgne7GAufDks5uerQfgaJpZM4WUbho> .

bauti-defi · 2018-10-03T17:27:56Z

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 · 2018-10-10T15:09:00Z

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 · 2018-12-03T18:16:59Z

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

thathexa mentioned this issue Sep 1, 2018

Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null babel/babel#8284

Closed

mweststrate mentioned this issue Sep 7, 2018

iOS App Crashing with libsystem_kernel.dylib`__pthread_kill mobxjs/mobx-react#546

Closed

mweststrate closed this as completed Oct 10, 2018

mobxjs locked as off-topic and limited conversation to collaborators Oct 10, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

thathexa commented Aug 31, 2018 •

edited

Loading

paul-paliychuk commented Sep 4, 2018

mweststrate commented Sep 4, 2018

mweststrate commented Sep 13, 2018

jakst commented Sep 13, 2018

mweststrate commented Sep 13, 2018 •

edited

Loading

mweststrate commented Sep 14, 2018

jakst commented Sep 14, 2018

mweststrate commented Sep 14, 2018 via email

jakst commented Sep 14, 2018

thathexa commented Sep 15, 2018

jakst commented Sep 17, 2018 •

edited

Loading

mshibl commented Sep 25, 2018 •

edited

Loading

mweststrate commented Sep 26, 2018 via email

bauti-defi commented Oct 3, 2018 •

edited

Loading

mweststrate commented Oct 10, 2018

mweststrate commented Dec 3, 2018

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

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

Comments

thathexa commented Aug 31, 2018 • edited Loading

paul-paliychuk commented Sep 4, 2018

mweststrate commented Sep 4, 2018

mweststrate commented Sep 13, 2018

jakst commented Sep 13, 2018

mweststrate commented Sep 13, 2018 • edited Loading

mweststrate commented Sep 14, 2018

jakst commented Sep 14, 2018

mweststrate commented Sep 14, 2018 via email

jakst commented Sep 14, 2018

thathexa commented Sep 15, 2018

jakst commented Sep 17, 2018 • edited Loading

mshibl commented Sep 25, 2018 • edited Loading

mweststrate commented Sep 26, 2018 via email

bauti-defi commented Oct 3, 2018 • edited Loading

mweststrate commented Oct 10, 2018

mweststrate commented Dec 3, 2018

thathexa commented Aug 31, 2018 •

edited

Loading

mweststrate commented Sep 13, 2018 •

edited

Loading

jakst commented Sep 17, 2018 •

edited

Loading

mshibl commented Sep 25, 2018 •

edited

Loading

bauti-defi commented Oct 3, 2018 •

edited

Loading