RangeError: Maximum call stack size exceeded

[xquezme]

Hello.

I'm getting the error "RangeError: Maximum call stack size exceeded", after

Component.html()

It resetting nested components and throw error because contain itself (in _children property) and reinvokes everytime.

All my components has different el's and not connected with each other.

Please check component prototype extending (I think components always has childrens of app.sandbox).

Thanks.

[sbellity]

Can you provide an example to reproduce this ?

Thanks

[xquezme]

window.app = app = new Aura({
    debug: {
        enable: true
    }
})
sandbox = app.sandbox;
app.start([]).then(function() {
    sandbox.start([{
        name: 'tour',
        options: {
            el: "#app__component__tour"
        }
    }]);
    //... some async logic
        sandbox.start([{
          name: 'spinner',
          options: {
            el: '#app__component__spinner'
          }
        }]);
})

After 'spinner' component started, it has 'tour' component in _children property.

[sbellity]

Alright, I think I know where this comes from.

app.sandbox is an object that is used as a prototype to create new sandboxes in components. It should not be used directly like that outside of a component.

If you need a sandbox outside, you can use app.core.appSandbox instead.

I realize that app.sandbox is confusing, many people run into issues trying to use this object directly. We probably need to find a way to avoid this confusion...

[elfakamal]

Thank you so much @sbellity this is really helpful I spent hours tearing my hair on an error when stop a component that I started with app.sandbox.start, it's sandbox had the _children property that contains the same component, so it fails on an infinite recursive process when trying to stop children too.

[fredericgrati]

Thank you so much @elfakamal and @sbellity. I had exactly the same infinite loop problem yesterday when I wrote "app.sandbox.star".

Thx for the question and the answer. :)