When using Vue.js with Axios for development, I encountered an error:
After clicking the button element, the error occurs: RangeError: Maximum call stack size exceeded
The button click triggers an HTTP API request, which is very simple with no complex code. Surprisingly, it still throws an error, which seemed strange.
The error call stack trace includes errors from the axios plugin JS.
Eventually, I found the root cause:
When the underlying request library (such as axios) attempts to serialize the parameters to JSON, Vue's reactive objects contain circular references internally, leading to a RangeError: Maximum call stack size exceeded (stack overflow) error.
Fix
Changing Xid to Xid.value resolved the issue.
These changes ensure that primitive data types are passed to the API, thereby avoiding circular reference issues during serialization.
This circular reference problem theoretically occurs in Vue 2, Vue 3, and React development. Developers should be aware of this issue.