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.

composition-api/src/runtimeContext.ts

Line 8 in 3a1d992

vueDependency = require('vue')

composition-api/src/runtimeContext.ts

Line 39 in 3a1d992

let constructor = vueConstructor || vueDependency

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.

composition-api/src/reactivity/reactive.ts

Line 202 in 5b1b094

export function reactive<T extends object>(obj: T): UnwrapRef<T> {

composition-api/src/reactivity/reactive.ts

Line 217 in 5b1b094

const observed = observe(obj)

composition-api/src/reactivity/reactive.ts

Line 101 in 5b1b094

const Vue = getRegisteredVueOrDefault()

Get the vue instance here.

composition-api/src/runtimeContext.ts

Line 39 in 3a1d992

let constructor = vueConstructor || vueDependency

Since there is no registration,
vueConstructor is null
use the default. vueDependency

composition-api/src/reactivity/reactive.ts

Line 218 in 5b1b094

setupAccessControl(observed)

composition-api/src/reactivity/reactive.ts

Lines 25 to 32 in 5b1b094

	function setupAccessControl(target: AnyObject): void {
	if (
	!isPlainObject(target) ||
	isRaw(target) ||
	Array.isArray(target) ||
	isRef(target) ||
	isComponentInstance(target) ||
	accessModifiedSet.has(target)

isComponentInstance

composition-api/src/utils/helper.ts

Lines 29 to 31 in 5b1b094

	export function isComponentInstance(obj: any) {
	const Vue = getVueConstructor()
	return Vue && obj instanceof Vue

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.

composition-api/src/runtimeContext.ts

Line 8 in 3a1d992

vueDependency = require('vue')

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