Getting error Maximum call stack size exceeded at place-order button click

Question

When I am trying to place an order I am getting an error like RangeError: Maximum call stack size exceeded at one-page checkout place order button click

Pre Conditions

1) One-page chceckout extension (https://marketplace.magento.com/espl-onepagecheckout.html)

2) Webkul Stripe extension (https://store.webkul.com/magento2-marketplace-stripe-vendor-payment.html)

Also getting the same error after disable ESPL one-page checkout extension

    Uncaught RangeError: Maximum call stack size exceeded
    at Function.Sizzle [as find] (184add52e34e0cecaf06d4f72a2a5050.min.js:247)
    at jQuery.fn.init.find (184add52e34e0cecaf06d4f72a2a5050.min.js:381)
    at jQuery.fn.init (184add52e34e0cecaf06d4f72a2a5050.min.js:387)
    at new jQuery.fn.init (eval at require.load (184add52e34e0cecaf06d4f72a2a5050.min.js:175), <anonymous>:29:16)
    at jQuery (184add52e34e0cecaf06d4f72a2a5050.min.js:206)
    at UiClass.getData (eval at require.load (184add52e34e0cecaf06d4f72a2a5050.min.js:175), <anonymous>:13:1)
    at UiClass.address [as selectPaymentMethod] (eval at require.load (184add52e34e0cecaf06d4f72a2a5050.min.js:175), <anonymous>:9:218)
    at HTMLInputElement.eval (eval at require.load (184add52e34e0cecaf06d4f72a2a5050.min.js:175), <anonymous>:360:164)
    at HTMLInputElement.dispatch (184add52e34e0cecaf06d4f72a2a5050.min.js:499)
    at HTMLInputElement.elemData.handle (184add52e34e0cecaf06d4f72a2a5050.min.js:472)

I have also checked var/log folder but not cleared why this error comes

Please give me any solution if anyone faced/knew this issue.

Thanks in advanced.

Answer 1

This error usually happens due to infinite recursion:

Infinite recursion is a special case of an infinite loop that is caused by recursion.

This post describes what you should do in detail.

https://stackoverflow.com/questions/6095530/maximum-call-stack-size-exceeded-error

You should also look into this also from same post;

You can sometimes get this if you accidentally import/embed the same JS file twice, worth checking in your resources tab of the inspector :)

Answer 2

This error is almost always means you have a problem with recursion in JavaScript code, as there isn't any other way in JavaScript to consume lots of stack. Sometimes calling a recursive function over and over again, causes the browser to send you Maximum call stack size exceeded error message as the memory that can be allocated for your use is not unlimited.

Be considerate while calling functions , also dry run is the best practice to prevent them. It's possible to cause infinite recursion in a fully promisified code, too. That can happen if the promises in a chain don't actually perform any asynchronous execution , in which case control never really returns to the event loop, even though the code otherwise appears to be asynchronous. That's when it's useful to wrap your recursive function call into a -

setTimeout
setImmediate or
process.nextTick

In some programming languages this can be solved with tail call optimization, where the recursion call is transformed under the hood into a loop so no maximum stack size reached error exists.