ExceptionsManager.js:180 Unhandled promise rejection RangeError: Maximum call stack size exceeded when consume api

[keyneslim]

What's going on?

Having ExceptionsManager.js:180 Unhandled promise rejection RangeError: Maximum call stack size exceeded

Steps to reproduce

1. Init new Pizza App
2. Go into demo list
3. Press refresh to trigger the demo list one or two times
4. ExceptionsManager.js:180 Unhandled promise rejection RangeError: Maximum call stack size exceeded is in the log

ignite doctor results: System platform darwin
arch x64
cpu 12 cores Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz directory PizzaApp /Users/xx/Projects/PizzaApp

JavaScript (and globally-installed packages) node 16.0.0 /usr/local/bin/node npm 7.10.0 /usr/local/bin/npm
@angular/cli 11.2.11
http-server 0.12.3
npm 7.10.0
yarn 1.22.10
yarn 1.22.10 /usr/local/bin/yarn

Ignite ignite-cli 6.12.2 /Users/xx/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite
ignite src build /Users/xx/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build

Android java 1.8.0_292 /usr/bin/java android home - undefined

iOS xcode 12.5
cocoapods 1.10.1 /usr/local/bin/pod

[osiloke]

I have the same issue but with the latest ignite as shown below. It's a very strange issue.

When a call is made using apisauce, it executes but does not return to the mobx state tree. However, if you console log response, it returns to the mobx state tree but gives the maximum call stack error

System
  platform           darwin
  arch               x64
  cpu                4 cores      Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  directory          docheck      /Users/***/workspace/***/***

JavaScript (and globally-installed packages)
  node                 14.17.0      /Users/***/.nvm/versions/node/v14.17.0/bin/node
  npm                  6.14.13      /Users/***/.nvm/versions/node/v14.17.0/bin/npm
    apollo             2.33.4
    appcenter-cli      2.9.0
    expo-cli           4.5.2
    ignite-cli         7.0.3
    json2csv           5.0.6
    live-server        1.2.1
    nhost              0.4.7
    npm                6.14.13
    passwordgen        0.3.0
    react-native-cli   2.0.1
    sqlite3            4.2.0
    yarn               1.22.10
  yarn                 1.22.10      /Users/***/.nvm/versions/node/v14.17.0/bin/yarn
    create-react-app   3.4.1
    ignite-cli         2.2.4

Ignite
  ignite-cli         7.0.3        /Users/***/.nvm/versions/node/v14.17.0/bin/ignite
  ignite src         build        /Users/***/.nvm/versions/node/v14.17.0/lib/node_modules/ignite-cli/build

Android
  java               12.0.1       /usr/bin/java
  android home       -            /Users/***/Library/Android/sdk/

iOS
  xcode              12.5
  cocoapods          1.10.1       /usr/local/bin/pod

[osiloke]

The problem seems to stem from the async methods in the api

[keyneslim]

I'm also not sure about this. I also facing issue of MST Store is not working as expected in Release Mode, compare to debug mode. Guess i will let this boiler plate go :(

[osiloke]

This is a great boilerplate, however, there seems to be an issue with async and apisauce (axios) and use fetch in the api. If you make the method a sync method it should work.

i.e

getUsers(){
    return fetch(this.api.config.url, {
      method: "post",
      body: JSON.stringify(getEvents()),
    })
      .then((resp) => resp.json())
      .then((data) => ({
        kind: "ok",
        data,
      }))
  }
}

[imxeno]

Any updates on this? I'm probably facing the same issue.

[Arnoldnuo]

Any updates on this? I'm facing the same issue too.

[osiloke]

Any updates on this? I'm facing the same issue too.

You can use my workaround to bypass this bug as shown in the snippet below. The only difference here is that getUsers() is not an async function but returns an async function.

This is a great boilerplate, however, there seems to be an issue with async and apisauce (axios) and use fetch in the api. If you make the method a sync method it should work.

i.e

getUsers(){
    return fetch(this.api.config.url, {
      method: "post",
      body: JSON.stringify(getEvents()),
    })
      .then((resp) => resp.json())
      .then((data) => ({
        kind: "ok",
        data,
      }))
  }
}

[Apophenian]

I'm also having this issue and unfortunately osiloke's workaround is not working for me.

[imxeno]

If you are not using expo, adding @babel/plugin-transform-async-to-generator to babel.config.js is a working workaround. If you are using expo, you're unfortunately out of luck.

[Apophenian]

This worked for me. Thank you.

[TrevPennington]

Using Expo here and adding @babel/plugin-transform-async-to-generator to babel.config.js worked.

[sitanjob]

Using Expo here and adding @babel/plugin-transform-async-to-generator to babel.config.js worked.

The issue still happen

[iamdavidmartin]

Using Expo here and adding @babel/plugin-transform-async-to-generator to babel.config.js worked.

Also using Expo, this didn't fix it. My console is full of these errors.

It is indeed very strange. Like @osiloke, I have to console.log to get the API calls to complete. However, I'm not using apisauce, I'm using amplify-js which uses axios internally.

I've tried tracking this error down but I have no idea where to find the issue and the error logs are not helpful at all.

[chreck]

I have this issue also with the latest ignite boilerplate version 7.5.0. Just apply the patch file on the new created app. 0001-test-useEffect-and-api-call.patch.zip

Steps to reproduce

1. Init new app
2. Apply patch
3. Run in debug mode

Post comment The API call is made and the data is stored in the in the mobx-state-tree. And this is only occurring in the debug mode. As long as the data is always stored in the state-tree I think this error log can be ignored.

[poplaw]

I've managed to fix this (just as a workaround) by removing the <ToggleStorybook /> from app.tsx. For some reason, it seems that the Storybook wrapper is causing the issue.

[thanhlmm]

@poplaw It did the trick

[WalrusSoup]

I've managed to fix this (just as a workaround) by removing the <ToggleStorybook /> from app.tsx. For some reason, it seems that the Storybook wrapper is causing the issue.

I'm going to piggyback this. As a newcomer to react native with this boilerplate, I ended up wasting 4 hours because my generator called an API and would not return to the caller. I don't know why this fixed it, but it did. :+1:

[jamonholmgren]

I'm going to get someone on this issue -- thank you!

[memyselfandm]

Also worked for me. in case anyone else was having issues, this had been giving me a fit when trying to get expo-in-app-purchases to work as well

[niieani]

I'm having the same issue with @nhost/hasura-auth-js crashing. Removing <ToggleStorybook /> as a workaround also did the trick.

potentially related issue: storybookjs/react-native#20

[dannyhw]

if removing toggle storybook fixes this then you should check this again now that the fix in #1906 has been merged. You can also try applying the patch from the PR manually to your project.

[sergioisidoro]

Even doing something like:

  useEffect(() => {
    console.log("USE EFFECT");
  }, [])

Was also triggering this for me

Unhandled promise rejection, [RangeError: Maximum call stack size exceeded.]
at node_modules/core-js/internals/host-report-errors.js:5:32 in module.exports
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:276218:138 in dispatchEvent
at node_modules/core-js/modules/es.promise.js:170:23 in perform$argument_0
at node_modules/core-js/internals/perform.js:3:20 in module.exports
at node_modules/core-js/modules/es.promise.js:167:22 in call$argument_2

Removing the <ToggleStorybook> worked, so I tried to apply @dannyhw patch by 1 - Copying the patch file in that PR to boilerplate/patches/@storybook+addons+5.3.21.patch 2- yarn install 3- expo start -c (-c is to clear the cache)

This seemed to fix the issue even after re-adding the ToggleStorybook 👍 Thanks @dannyhw !

[dannyhw]

@jamonholmgren I think maybe this issue could be closed since it looks like its fixed by #1906

[nesjett]

Just some info if someone needs storybook and still facing issues: If I remove < ToggleStorybook > as proposed, it works, but thats just a workaround, the real issue is caused because I'm executing my code "too early" in a useEffect() just at the app startup and that has some conflict with storybook initialization (I guess).

If I delay that useEffect() action (in my case I'm launching a mobx action to call the server API inside of It) for example with a TimeOut of 500ms, everything works well.

[yulolimum]

Our team has decided to move away from Storybook altogether. We will be removing it in Ignite v8: Maverick. Meanwhile, the reported issue should be resolved with #1906 (thank you!); and for users that prefer not to patch, removing the <ToggleStorybook> wrapper and mounting Storybook inside a navigation screen should achieve similar results.