error Cannot read property 'silent' of undefined

[SCWR]

I'm having a problem with it.

My project is in esm mode, so I use @vue/compostition-api esm version of the code.

I define the following code.

import {ref} from '@vue/compostition-api';
const a = ref(false);

export  function useA () {
   return {a};
}; 

...
setup(){
  const {a} = useA()
}

I got an error.

When I debugger. https://github.com/vuejs/composition-api/blob/3a1d99263c91db45fdf90cbd6bb1da9ed2ff20f1/src/runtimeContext.ts#L8 https://github.com/vuejs/composition-api/blob/3a1d99263c91db45fdf90cbd6bb1da9ed2ff20f1/src/runtimeContext.ts#L39 vueConstructor is null vueDependency is {default: ...}

Whether vueDependency should be dealt with. or use import, let babel or webpack handle it.

Or there is a problem with my project configuration.
How it needs to be configured.

[antfu]

Did you install the plugin via?

Vue.use(VueCompositionAPI)

[SCWR]

Did you install the plugin via?

Vue.use(VueCompositionAPI)

Definitely set it up.

[antfu]

Can you share a minimal reproduce repo or CodeSandbox? Thanks.

[SCWR]

Can you share a minimal reproduce repo or CodeSandbox? Thanks.

As I was preparing CodeSandbox, I found that I had indeed referenced the file before Vue.use(VueCompositionAPI). And because const a s ref (false) is run first.

Therefore, mistakes will be reported.

The order in which ref is executed is.

https://github.com/vuejs/composition-api/blob/5b1b094265ddb07790496066f4574e018da51331/src/reactivity/reactive.ts#L202

https://github.com/vuejs/composition-api/blob/5b1b094265ddb07790496066f4574e018da51331/src/reactivity/reactive.ts#L217

https://github.com/vuejs/composition-api/blob/5b1b094265ddb07790496066f4574e018da51331/src/reactivity/reactive.ts#L101 Get the vue instance here. https://github.com/vuejs/composition-api/blob/3a1d99263c91db45fdf90cbd6bb1da9ed2ff20f1/src/runtimeContext.ts#L39 Since there is no registration, vueConstructor is null use the default. vueDependency

https://github.com/vuejs/composition-api/blob/5b1b094265ddb07790496066f4574e018da51331/src/reactivity/reactive.ts#L218

https://github.com/vuejs/composition-api/blob/5b1b094265ddb07790496066f4574e018da51331/src/reactivity/reactive.ts#L25-L32

isComponentInstance

https://github.com/vuejs/composition-api/blob/5b1b094265ddb07790496066f4574e018da51331/src/utils/helper.ts#L29-L31

The check is only verified when it is run here.

Why didn't my project run here?

I compared my project to CodeSandbox.

Discover that the vue version of that I use in my project is vue.esm.js cause of 'vueDependency' is {defalut: Vue.}.

CodeSandbox use vue.common.js
'vueDependency' is Vue.

I feel like there's something wrong here. https://github.com/vuejs/composition-api/blob/3a1d99263c91db45fdf90cbd6bb1da9ed2ff20f1/src/runtimeContext.ts#L8

Thank you for your review.

[LinusBorg]

you may have a point there with the last line. Maybe we don't properly handle he moduleinterop default export.

try {
  vueDependency = require('vue')
  if (typeof vueDependency !== 'function' && vueDependency.default) {
    vueDependency = vueDependency.default
  }
} catch {
  // not available
}

@antfu thoughts?

[antfu]

@LinusBorg Exactly going to do this! Is there any reason to check if it's a function, or are you meant to be check if it's Vue?

[pikax]

Is there any reason to check if it's a function

I think is just to make sure that vueDependency is not vue and is a module.

[LinusBorg]

Yep. if its a function we already have the default export - the Vue Constructor. If it's not, we have an object with the Vue constructor in the default property