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

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 Screenshot 2021-06-18 at 10 36 30 PM

ignite doctor results: System platform darwin
arch x64
cpu 12 cores Intel® Core™ 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

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 10
  • Comments: 25 (5 by maintainers)

Most upvoted comments

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 get someone on this issue – thank you!

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

The issue still happen

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. 👍

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.

@poplaw It did the trick

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.

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 !

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.

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.