Error: rootStateRef.value is undefined when used with debounced

[tobiasdiez]

Reproduction

Sadly, I was not yet able to find a minimal reproducible setup. But the following steps seem to be necessary to trigger the error.
The error occurred for me in the following real-life setting: https://github.com/JabRef/JabRefOnline/blob/39b259975ad41f9ea7156d9ef374ecbe732ef114/components/Navbar.vue#L193-L200 (replace watch with debouncedWatch as described below).

Steps to reproduce the behavior

1. Define a store with a variable, say query
2. Use this store in two different vue components (not sure if this is really necessary)
3. Change the value of the store's variable using the debounce function from vueuse

    const store = useStore()
    const searchQuery = ref('')
   
    debouncedWatch(searchQuery, (newQuery) => {
      store.query = newQuery
    }, {debounce: 300})

4. Bind searchQuery to an input's v-model (again, not sure if that's really necessary).

Everything works if one replaces the debouncedWatch by a normal watch.

Expected behavior

It just works.

Actual behavior

Get the following error, not necessarily in the above code but in the other place where the store is used:

    TypeError: rootStateRef.value is undefined
    computedFromState pinia.esm-bundler.js:186
    buildStoreToUse pinia.esm-bundler.js:371
    useStore pinia.esm-bundler.js:422
    setup DetailPane.vue:193
    mergedSetupFn vue-composition-api.esm.js:1899
    initSetup vue-composition-api.esm.js:1678
    activateCurrentInstance vue-composition-api.esm.js:1601
    initSetup vue-composition-api.esm.js:1676
    wrappedData vue-composition-api.esm.js:1660
    VueJS 36
    render default.vue:28
    render vue-composition-api.esm.js:1645
    activateCurrentInstance vue-composition-api.esm.js:1601
    render vue-composition-api.esm.js:1645

This is pointing to https://github.com/posva/pinia/blob/47c6309ba13ed68922ad9895c6bb2847a6681198/src/store.ts#L85

[posva]

Checking the code I noticed that toRef(uiStore.activeSearchQuery) should be toRef(uiStore, 'activeSearchQuery'). Or even better toRef(uiStore.$state, 'activeSearchQuery'). Other than that I can't give you more without a boiled down reproduction 😄

[tobiasdiez]

Thanks for your answer.

I tried to produce a minimal reproduction environment but failed so far: https://codesandbox.io/s/serene-margulis-ek3x9?file=/src/App.vue (everything is working nicely with debounce in this context). I'll continue to reproduce this is issue in a more defined context, but do you have an idea why rootStateRef.value can be null?

[posva]

I'm not sure but that code sandbox is definitely outdated as it has calls to store.patch instead of store.$patch.