Keep getting "getActivePinia()" was called but there was no active Pinia error

[ymansurozer]

I wanted to give Pinia Colada a try because it really looks great!

But immediately after I do the setup and try to use useQuery, I get the error in the title. I am not calling Pinia anywhere at all and the stack shows it is being called in Colada. I have a very simple app.vue:

<script lang="ts" setup>
import type { Todo } from '~/types';
import { useQuery } from '@pinia/colada';

const newTodo = ref('');

const { data: todos } = useQuery({
  key: ['todos'],
  query: () => $fetch<Todo[]>('/api/todos'),
});
</script>

<template>
  <div>
    <div>
      <input v-model="newTodo" />
    </div>

    <h2>Todos</h2>
    <pre>{{ todos }}</pre>
  </div>
</template>

Here is a reproduction: https://stackblitz.com/edit/github-xmm1oh?file=app.vue

[posva]

See vuejs/pinia#2820

[ymansurozer]

Thanks for the prompt response Eduardo! Excluding pinia from Vite's optimizeDeps solved it for me.

The weird thing is my reproduction is neither a monorepo nor uses pnpm. It is a bare-bones Nuxt project with npm as package manager.

Edit: I keep getting the following warning on the console, is it related to this as well?

Found a nullish hmr id. This is probably a bug. Please report it to pinia-colada with a boiled down reproduction. Thank you!

Sorry if I'm being too picky but we're trying Colada as an alternative to Tanstack Query for a relatively big project and warnings make me a bit worried.

[posva]

There are a few issues related to Nuxt (or vite) and deps. I recommend you to add @pinia/colada to the exclude array alongside pinia too 🙂
That warning is fixed but not released yet. it's just that, a warning that shouldn't be shown. It's also only about HMR, so dev only. Nothing to worry.

[posva]

FYI, the latest @pinia/nuxt module should fix the issue

[ymansurozer]

Thank you very much Eduardo!