[Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read property '$scopedSlots' of undefined"

[jourdanrodrigues]

Essentially, I'm just mounting a component that has children with v-validate prop on a test.

Once I remove the v-validate prop from the children, the test passes just fine.

Any idea why that happens?

Edit:

Reproducing is possible here: https://github.com/jourdanrodrigues/v-validate-issue. I'm having this issue on a MacOS Mohave and Ubuntu/Alpine (Docker) and VeeValidate 2.2.x.

[logaretm]

Can you share a working demo so I can debug this?

[jourdanrodrigues]

@logaretm Tried to, but couldn't. It fails only on my project (which sharing it wouldn't be possible).

I'm trying to debug VeeValidate myself to come here with a more detailed point of failure.

[jourdanrodrigues]

@logaretm It fails precisely at the last line of FieldBag.push, which is called in directive.bind when attaching the field options to the validator.

TypeError: Cannot read property '$scopedSlots' of undefined
  at updateChildComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4103:1)
  at prepatch (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3125:1)
  at patchVnode (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6302:1)
  at updateChildren (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6187:1)
  at patchVnode (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6313:1)
  at updateChildren (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6187:1)
  at patchVnode (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6313:1)
  at VueComponent.patch [as __patch__] (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6476:1)
  at VueComponent.Vue._update (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3942:1)
  at VueComponent.updateComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4060:1)
  at Watcher.get (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4473:1)
  at Watcher.run (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4548:1)
  at flushSchedulerQueue (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4304:1)
  at queueWatcher (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4393:1)
  at Watcher.update (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4538:1)
  at Dep.notify (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:730:1)
  at Array.mutator (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:882:1)
  at FieldBag.push (<project_root>/dist/webpack:/node_modules/vee-validate/dist/vee-validate.esm.js:2581:1)
  at Validator.attach (<project_root>/dist/webpack:/node_modules/vee-validate/dist/vee-validate.esm.js:3090:1)
  at ScopedValidator.attach (<project_root>/dist/webpack:/node_modules/vee-validate/dist/vee-validate.esm.js:2657:1)
  at bind (<project_root>/dist/webpack:/node_modules/vee-validate/dist/vee-validate.esm.js:2862:1)
  at callHook$1 (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6674:1)
  at _update (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6595:1)
  at Array.updateDirectives (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6576:1)
  at invokeCreateHooks (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6063:1)
  at initComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5996:1)
  at createComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5979:1)
  at createElm (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5919:1)
  at createChildren (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6047:1)
  at createElm (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5948:1)
  at createChildren (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6047:1)
  at createElm (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5948:1)
  at VueComponent.patch [as __patch__] (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6471:1)
  at VueComponent.Vue._update (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3939:1)
  at VueComponent.updateComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4060:1)
  at Watcher.get (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4473:1)
  at new Watcher (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4462:1)
  at mountComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4067:1)
  at VueComponent../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:8409:1)
  at init (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3118:1)
  at createComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5972:1)
  at createElm (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:5919:1)
  at VueComponent.patch [as __patch__] (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:6471:1)
  at VueComponent.Vue._update (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:3939:1)
  at VueComponent.updateComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4060:1)
  at Watcher.get (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4473:1)
  at new Watcher (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4462:1)
  at mountComponent (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:4067:1)
  at VueComponent../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (<project_root>/dist/webpack:/node_modules/vue/dist/vue.runtime.esm.js:8409:1)
  at mount (<project_root>/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:8649:1)
  at shallowMount (<project_root>/dist/webpack:/node_modules/@vue/test-utils/dist/vue-test-utils.js:8677:1)
  at <project_root>/dist/webpack:/tests/unit/utils.js:19:1
  at Context.it (<project_root>/dist/webpack:/tests/unit/components/JournalForm.spec.js:6:1)
  at callFn (<project_root>/node_modules/mocha/lib/runnable.js:372:21)
  at Test.Runnable.run (<project_root>/node_modules/mocha/lib/runnable.js:364:7)
  at Runner.runTest (<project_root>/node_modules/mocha/lib/runner.js:455:10)
  at <project_root>/node_modules/mocha/lib/runner.js:573:12
  at next (<project_root>/node_modules/mocha/lib/runner.js:369:14)
  at <project_root>/node_modules/mocha/lib/runner.js:379:7
  at next (<project_root>/node_modules/mocha/lib/runner.js:303:14)
  at Immediate._onImmediate (<project_root>/node_modules/mocha/lib/runner.js:347:5)
  at processImmediate (timers.js:632:19)

[jourdanrodrigues]

@logaretm Man, really need some help with this and, despite not being able to reproduce with a simple example, a simple example from my project is not working.

If I have 1 component with v-validate it works, if I have 2 or more it breaks with the above message.

Would you be available anytime for a call for me to show you? Getting really desperate because I'm with this for 6 days now, with no perspective of a solution in sight.

[logaretm]

@jourdanrodrigues I'm available this week feel free to contact me on my email to schedule a call.

[jourdanrodrigues]

@logaretm I don't think it's necessary anymore because I got it replicated: https://github.com/jourdanrodrigues/v-validate-issue

It's working fine for the tests of TestComponent1.vue, but it fails for TestComponent2.vue.

Seems like a state that's preserved between tests in the Vue instance.

What's happening in my own project doesn't even has to do with v-validate itself: it mounts other components that don't use it, then when it comes to one that uses, it breaks.

[pierremanceaux]

This is the error our users are having on iPhone/iPad/Mac on Safari 12.1+. All other browsers seem to work fine.

TypeError: undefined is not an object (evaluating 'vm.$scopedSlots')
  at promiseReactionJob([native code])
  at parseFromString([native code])

I will try to provide more information as I investigate.

Update 1:
It appears that adding inject: ['$validator'], to any of my components breaks on Safari 12.1+. Works fine on every other browsers.

[logaretm]

@jourdanrodrigues Your example works fine on my windows devices, can you confirm if you are debugging on MacOS device, or like @pierreneter said. Does it only happen on Safari?

Another thing, @jourdanrodrigues would you mind testing the same behavior with ValidationProvider components?

[pierremanceaux]

@logaretm yes, only on Safari 12.1 and 12.2 (recent releases). But I'm currently still digging in that bug, it might not be caused by vee-validate. I will update you when I know more.

[jourdanrodrigues]

@logaretm @pierremanceaux I'm actually writing tests, but it is indeed in MacOS. I'll try to do the ValidationProvider to see if helps, but only after I check with Docker on a Linux container.

Will get back to you in a few.

[jourdanrodrigues]

@logaretm I'm afraid I don't know how to use ValidationProvider with the current setup (working on an existing Vue project and I'm new to Vue).

Tried implementing, but we have a submit handler that's letting it pass with invalid values when I submit the forms.

[pierremanceaux]

The more I move on with my issue, the more I think it isn't related to yours. I "kind of" fixed the problem by touching other parts of my app, not completely perfect yet, but at least Safari 12.1 users now can use the app. I will also get back to you guys here whenever I have new information about our issue 👍.

[jourdanrodrigues]

Gosh, man. I'll try to go with Docker and see if it works. Thanks for dropping by either way.