Vee-validate: Maximum call stack size exceeded when used in Quasar Framework

[kidox]

Versions

• vee-validate: 2.2.0
• vue: 3.4.1
• Quasar Framework
• Quasar-Cli: 0.17.24

Bug description
When adding vee-validate to a Quasar Framework plugin it causes a
Error in nextTick: "RangeError: Maximum call stack size exceeded"
every time you make a Router.push to the root path.

Error

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
logError @ vue.runtime.esm.js?2b0e:1733
globalHandleError @ vue.runtime.esm.js?2b0e:1728
handleError @ vue.runtime.esm.js?2b0e:1717
(anonymous) @ vue.runtime.esm.js?2b0e:1835
flushCallbacks @ vue.runtime.esm.js?2b0e:1754
vue.runtime.esm.js?2b0e:1737 RangeError: Maximum call stack size exceeded
    at ErrorBag.reactiveGetter [as vmId] (vue.runtime.esm.js?2b0e:981)
    at mergeData (vue.runtime.esm.js?2b0e:1130)
    at mergeData (vue.runtime.esm.js?2b0e:1135)
    at mergeData (vue.runtime.esm.js?2b0e:1135)
    at mergeData (vue.runtime.esm.js?2b0e:1135)
    at mergeData (vue.runtime.esm.js?2b0e:1135)
    at mergeData (vue.runtime.esm.js?2b0e:1135)
    at mergeData (vue.runtime.esm.js?2b0e:1135)
    at mergeData (vue.runtime.esm.js?2b0e:1135)
    at mergeData (vue.runtime.esm.js?2b0e:1135)

Stepts to reproduce

1. Install a fresh copy of Quasar Framework in PWA mode
   
   
   
   • yarn global add quasar-cli
   
   
   • quasar init testquasarveevalidate
   
   
2. Install and import 'vee-validate' as a plugin
   
   
   
   • npm install vee-validate
   
   
   • quasar new plugin vee-validate and edit created file 'src/plugins/vee-validate.js' and add the following code:
   
   

import VeeValidate from 'vee-validate'

export default ({ Vue }) => {
  Vue.use(VeeValidate)
}

1. Link the plugin inside quasar.conf.js file:

module.exports = function (ctx) {
  return {
    // app plugins (/src/plugins)
    plugins: [
      ...
      'vee-validate'
    ],
    ...

1. Set @click.prevent="$route.push('/')" from any button or point to any incorrect route and try to get back to the previous route using default error page back button

Additional context
Validatins in forms still work as expected but plugin breaks vue routes.

[logaretm]

This is caused by a circular reference in vee-validate code, I'm currently in the process of re-writing everything, so this issue might be fixed then.

[Mighty683]

I have occured the same problem with vee-validate when I was using large number of custom inputs on the same component.

[logaretm]

I have tested this again, and there is a workaround for this. You should disable the automatic error injection with the inject option:

import VeeValidate from 'vee-validate'

export default ({ Vue }) => {
  Vue.use(VeeValidate, { inject: false })
}

And anywhere where you would need to use vee-validate you inject a new validator like this:

<script>
export default {
  $_veeValidate: {
    validator: 'new' // inject a new validator to be used by the directives.
  },
  name: 'Form'
}
</script>

This is documented here and is a similar use case to Nuxt.