Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useVuelidate() with Vue 2 crashes with "getCurrentInstance is not a function" #877

Closed
tony19 opened this issue Jun 12, 2021 · 1 comment
Closed

Comments

@tony19
Copy link

tony19 commented Jun 12, 2021

Describe the bug
Following the guide for using Vuelidate with Composition API, I'm seeing an error when useVuelidate() is called:

index.js:27 TypeError: (0 , $csb__vuedemi.getCurrentInstance) is not a function

This seems to occur only in Codesandbox or StackBlitz. Running the same code in a Vue CLI scaffolded project works fine.

Stack trace
index.js:27 TypeError: (0 , $csb__vuedemi.getCurrentInstance) is not a function
    at useVuelidate (index.esm.js:580)
    at setup (App.vue:32)
    at mergedSetupFn (vue-composition-api.esm.js:1957)
    at eval (vue-composition-api.esm.js:1770)
    at activateCurrentInstance (vue-composition-api.esm.js:1708)
    at initSetup (vue-composition-api.esm.js:1769)
    at VueComponent.wrappedData (vue-composition-api.esm.js:1756)
    at getData (vue.common.dev.js:4754)
    at initData (vue.common.dev.js:4711)
    at initState (vue.common.dev.js:4650)
    at VueComponent.Vue._init (vue.common.dev.js:5010)
    at new VueComponent (vue.common.dev.js:5157)
    at createComponentInstanceForVnode (vue.common.dev.js:3307)
    at init (vue.common.dev.js:3136)
    at createComponent (vue.common.dev.js:6013)
    at createElm (vue.common.dev.js:5960)
    at Vue.patch [as __patch__] (vue.common.dev.js:6549)
    at Vue._update (vue.common.dev.js:3957)
    at Vue.updateComponent (vue.common.dev.js:4078)
    at Watcher.get (vue.common.dev.js:4490)
    at new Watcher (vue.common.dev.js:4479)
    at mountComponent (vue.common.dev.js:4085)
    at Vue.$mount (vue.common.dev.js:9084)
    at Vue.$mount (vue.common.dev.js:11989)
    at evaluate (main.js? [sm]:9)
    at V (eval.js:42)
    at ee.evaluate (transpiled-module.js:699)
    at ge.evaluateTranspiledModule (manager.js:297)
    at ge.evaluateModule (manager.js:268)
    at compile.ts:728
    at c (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.t. [as next] (runtime.js:97)
    at r (asyncToGenerator.js:3)
    at u (asyncToGenerator.js:25)

Reproduction URL
https://codesandbox.io/s/usevuelidate-bug-getcurrentinstance-is-not-a-function-6rx9w

or

https://stackblitz.com/edit/vuelidate-bug-demo

To Reproduce
Steps to reproduce the behavior:

  1. Create new Codesandbox for Vue 2 (or fork Vuelidate's official Vue 3 + Composition API Starter and switch Vue version to 2.x).

  2. Add dependency for @vue/composition-api, and install it from main.js:

    import VueCompositionApi from '@vue/composition-api'
    Vue.use(VueCompositionApi)
  3. Open src/App.vue, and copy Vuelidate guide's example code for the Composition API usage:

    import { reactive, toRefs } from '@vue/composition-api'
    import useVuelidate from '@vuelidate/core'
    import { required, email } from '@vuelidate/validators'
    
    export default {
      setup () {
        const state = reactive({
          firstName: '',
          lastName: '',
          contact: {
            email: ''
          }
        })
        const rules = {
          firstName: { required }, // Matches state.firstName
          lastName: { required }, // Matches state.lastName
          contact: {
            email: { required, email } // Matches state.contact.email
          }
        }
    
        const v$ = useVuelidate(rules, state)
    
        return { ...toRefs(state), v$ }
      }
    }
  4. See error in browser console

Expected behavior
The same output from Vuelidate's official Vue 3 + Composition API Starter.

Screenshots
Screen Shot 2021-06-11 at 10 14 50 PM

Additional context

  • vue 2.6.14
  • @vue/composition-api 1.0.0-rc.11
  • @vuelidate/core 2.0.0-alpha.14 (also newer versions, including 2.0.0-alpha.19)
  • @vuelidate/validators 2.0.0-alpha.12 (also newer versions, including 2.0.0-alpha.17)
  • macOS BigSur
  • Chrome 91
  • StackBlitz (version unknown, but as of 11-Jun-2021)
  • CodeSandbox a566285e0
@dobromir-hristov
Copy link
Contributor

This is an issues with Vue demi and those platforms. Not much we can do :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants