Maximum call stack size exceeded (Shopware & vue.js)

This error can apparently happen as a result of numerous situations causing perpetual calls to functions or methods. In this article, I try to list some of them.

68 views

By. Jacob

Edited: 2023-11-04 11:33

An error was captured in current module: RangeError: Maximum call stack size exceeded

I had this error happen recently when I mistakenly removed a data(){ ... } property that was used by a computed() {} property. I'd expect to see a "undefined" error of sorts, but not something like: maximum call stack size exceeded... – the reason this happens is probably because the computed property will perpetually try to access the non-existent property until the call stack size is exceeded. It is very strange it does not just throw a undefined error, which would have been much easier to debug.

Another cause for this error can be when a function or method recursively calls itself. This might actually be more common out in the wild, but it is difficult to say, since this is the only time I have seen the error.

Circular references in computed properties is also a possible cause that someone might see this error. E.g. If a computed property calls another property, which then again calls the first property.

More rarely, a watcher might modify the data on a property it is watching, which could cause it to perpetually trigger itself, exceeding the maximum call stack.

I'd expect whatever might cause an "infinite call loop" might be causing the problem.