"getCurrentInstance is not a function" in Codesandbox/StackBlitz

[tony19]

For some reason, Vuelidate's useVuelidate() function crashes on vue-demi's getCurrentInstance(), but only in Codesandbox (with Vue 2 only) and StackBlitz (any version of Vue).

I initially opened a Vuelidate issue, but they punted to vue-demi.

---

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

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

[antfu]

I'd feel it's the env you use does not support postinstall hook, maybe try npx vue-demi-switch 2 if you have access to terminal

[tony19]

StackBlitz: It indeed looks like the postinstall scripts are disabled in StackBlitz. Running the postinstall manually in node_modules/vue-demi doesn't seem to do anything, but that also could be specific to StackBlitz WebContainers (still in beta).

CodeSandbox: I'm confused as to how it would work in CodeSandbox for Vue 3, but not Vue 2.

[antfu]

I'm confused as to how it would work in CodeSandbox for Vue 3, but not Vue 2.

vue-demi default to Vue 3, so it will work even without postinstall hook

[victorgarciaesgi]

I'm trying to make a demo for my library using vue-demi too and got the same error on CodeSandbox. The problem is that we do not have access to the terminal so we can't run npx vue-demi-switch 2 :(

[victorgarciaesgi]

Repro: https://codesandbox.io/s/demo-vue-chart-3-vue-2-pvogd?file=/src/App.vue

[victorgarciaesgi]

Managed to get it working on a nuxt container which have access to terminal