RangeError: Maximum call stack size exceeded

[chenhongtu]

Versions

• vee-validate: 3.0.3
• vue: 2.6.20
• ant-design-vue: 1.3.16

Describe the bug
Error in v-on handler: "RangeError: Maximum call stack size exceeded"
crash

To reproduce
type some characters

Demo link
Codesandbox.

Desktop:

• OS: Windows 10
• Browser Chrome
• Version 76

[logaretm]

I'm not sure what is the problem, there is a workaround though.

You could inline the element instead of using slot to pass it in ... Until I investigate more.

[chenhongtu]

@logaretm
The number of listeners for the INPUT vue instance will continue to grow.
INPUT vue instance $listeners {change.value: Array(241), blur: Array(241)}

[logaretm]

This is duplicate of #2185

I will try to address this issue once I pinpoint the problem.

[gryphon]

Having the same issue for me.
Making own component with ValidationProvider and slot for input could be much more useful then other ways of refactoring validation provider but this causes call stack errors.

[antoniogiroz]

Same error for me. The error appears when the field loses the focus.

CodeSandbox: https://codesandbox.io/s/veevalidate-custom-input-6gb4c

[logaretm]

Well finally I was able to pinpoint the issue, a couple of Vue internals I wasn't aware of were causing an infinite loop to happen under that condition for some reason.

[vhoyer]

So you changed the order of the checks and that did the job, or it was specifically the .fns? what even is this .fns?

[logaretm]

@vhoyer The order of checks wasn't really the fix here.

Some parts of the Vue VNode are undocumented. Whenever you have a vnode that has a v-model on it, the invoker object shows up with the listeners inside its fns array. The buggy code treated the invoker function like functions on vnode.data.on.

This caused the invoker to be circular, as it was always going to reference itself due to the merging strategy I used. I added another one specifically for the invoker function which is to sneak in my listeners instead, that did the trick.