Vee-validate: [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.

[pierremanceaux]

Good luck with that then, and thank you for your time too!

[jourdanrodrigues]

@logaretm Same problem with Linux Docker (which is expected since Mac and Linux are Unix-based). Don't have a Windows system to check.

[jourdanrodrigues]

I'll drop this since I got stuff to deliver soon. Would be glad if you got a Mac/Docker setup to replicate and fix it, so I don't need to migrate to something else.

[GavinSutherland]

Hi, are there any updates on this issue? I am seeing a similar error using Vuetify. If I have a form like this ...

<v-form v-model="isFormValid"> <!-- Layout and inputs removed for brevity --> </v-form>

... where isFormValid is just a Boolean property then I get the following error in my unit tests:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$scopedSlots' of undefined"

If I remove the v-model="isFormValid" directive the test starts passing.

[valterbarros]

@GavinSutherland I'm having a close problem too

[valterbarros]

@GavinSutherland See that apparently the sync option from mount is causing that https://github.com/vuejs/vue-test-utils/issues/1130

[logaretm]

closing since no activity and is probably related to vue test package.

[jankoboz]

I had the same issue and clearing the browser cache sorted my problem.

1- Open chrome dev tools (as you are on localhost | 127.0.0.1 or wherever you run your site)
2- Click on the [application] tab
3 - Click on the [clear storage]
4 - Click on the [clear site data] button

Restart your app, and manually reload the page. Hope this will help you

[Mighty683]

I have the same issue when launching with jest test runner on Linux host.

[adamorlowskipoland]

Use sync: false property in options, while mounting component.

mount(YourComponent, {
    propsData: {},
    sync: false, // add this
  });

[jourdanrodrigues]

@adamorlowskipoland I tried setting it to false back then. Didn’t work. 😕

I’d be surprised if this issue is still happening in current version. It’s been quite a while.

[quezadaesteban]

Use sync: false property in options, while mounting component.

mount(YourComponent, {
    propsData: {},
    sync: false, // add this
  });

This worked for me. I was using the Vuetify data iterator and I was getting this error when running a second or more 'it()' in tests.

[luckylooke]

Where that fix "sync: false" came from?
I did not find any docs for it https://vue-test-utils.vuejs.org/api/options.html#mounting-options
I would like to understand what is it exactly.
🤔
But thank you anyway for providing solution.

[quezadaesteban]

Where that fix "sync: false" came from?
I did not find any docs for it https://vue-test-utils.vuejs.org/api/options.html#mounting-options
I would like to understand what is it exactly.
🤔
But thank you anyway for providing solution.

In previous versions of vue-jest, they were trying to handle component syncing themselves, if you wanted to disable it you added the sync: false option, but that had many inconsistences (like the issues with the $scopedSlots).

In recent versions of vue-jest they no longer sync actions, that means that we, the developers, need to make sure to await any async functions now like clicking or setting a field value, also waiting for $nextTick if necessary.

Hope it helps.