Maximum call stack exceeded when using with custom components

[konstantinrachev]

Version

2.5.14

Reproduction link

https://jsfiddle.net/50wL7mdz/175425/

Steps to reproduce

1. Including vue(v.2.5.14) and element.io styles and library.
2. Opening new form.
3. Opening new form element.
4. Using custom date picker element.

What is expected?

It is expected to render a custom UI component for date picking.

What is actually happening?

The element is not being render as the console is filled with errors.

[Vue warn]: Error in render: "RangeError: Maximum call stack size exceeded", vue.js:597
RangeError: Maximum call stack size exceeded, vue.js:1745

---

The issue is related to the latest vue.js version as it is working as expected with all up to 2.5.13.

[posva]

Duplicate of #7786

[dorianWB]

I still get this error, but I haven't got the time to put together a reproduction case right now. I know that it exists in 2.5.16 still and going back to 2.5.13 resolves the issue and the error looks like RangeError: Maximum call stack size exceeded at Function.[Symbol.hasInstance] (<anonymous>) at t (app.c84200b64a284b43c3fe.js:1) which t is the _traverse function and the error is in

vue/src/core/observer/traverse.js

Lines 19 to 24 in 84a9a9d

	function _traverse (val: any, seen: SimpleSet) {
	let i, keys
	const isA = Array.isArray(val)
	if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
	return
	}

[rowild]

I also get this error, when document.querySelector() tries to bind DOM to a configuration element, that is set to store.config via a mutation. (The function is called from root element's mounted() ) ...

EDIT: happens only, when store is in strict mode.

[Darkside73]

Confirming this issue when store in a strict mode (using nuxt)

[sarkiroka]

Confirming too with v2.5.15 and v2.5.17

[kvnify]

I'm possibly seeing this as well. Can confirm that disabling strict mode in the vuex store seemed to fix the issue.

[konstantinrachev]

Yeah, strict mode does seem to fix the issue.

[Gyanxie]

var selfObj= {};
selfObj.self = selfObj;
new Vue({
computed: { selftWatch: function get() { return selfObj; } } ,
watch: {
selftWatch: {
deep: true,
handler: function () { console.error('seccess run ')}
}
}
});
看了下 _traverse 方法，没有对 对象去重，应该记录所有对象的引用。

[sellingsolutions]

I was brought to this issue by searching for:
Error in render: "RangeError: Maximum call stack size exceeded

However, it didn't have anything to do with the naming of components. It's probably related to what @Gyanxie posted above.

My offender was the code snippet below:

watch: {
    '$vuetify.breakpoint': {
      handler: function(newBreakpoint) {},
      deep: true,
      immediate: true
    }
}

This might prove useful to the next person that runs into this cryptic error message