@pinia/nuxt: getActivePinia was called with no active Pinia

[findtoni]

Hi there, I'm getting this error when I run npm run build on Nuxt 3.

Environment

"nuxt3": "latest",
"@pinia/nuxt": "^0.1.5",
"pinia": "^2.0.3"

buildModules: [
    '@pinia/nuxt',
  ],

import { defineStore } from 'pinia';

export const useTheme = defineStore('theme', {
  state: () => ({
    name: 'theme-name',
  }),
});

Error

[🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
        const pinia = createPinia()
        app.use(pinia)
This will fail in production.
  at useStore (file://./.output/server/node_modules/pinia/dist/pinia.mjs:1575:19)  

[findtoni]

Reproduction

1. npx nuxi init nuxt3-app
2. npm i
3. npm install pinia @pinia/nuxt
4. Add buildModules: [ '@pinia/nuxt' ] to nuxt.config.js
5. Create store/theme.js

import { defineStore } from 'pinia';

export const useTheme = defineStore('theme', {
  state: () => ({
    name: 'theme-name',
  }),
});

6. Use store

<script setup>
import { useTheme } from '~/store/theme';
const theme = useTheme();
</script>

7. Run npm run build

[posva]

Apart from this existing bug in Nuxt, it seems to work: https://github.com/piniajs/example-nuxt-3

[bencodezen]

Okay so I think I figured out the issue that causes this. Not sure if this is directly related to the original post, but since I couldn't understand why it seemed to work in some cases and not others, I finally narrowed it down to a reproducible repo:

https://github.com/bencodezen/nuxt-3-sandbox

The interesting part is that this error doesn't show up in nuxi dev at all. It only shows up on build and my guess is that it's likely because of how it's being compiled.

When you run npm run build on this, this is where you'll see that error appear every time. And from my debugging so far, it's happening when a dev tries to setup a second store and calls it within another outside of the context of the store itself. And while maybe this would be obvious to some, I think this is a common pattern we'll find people encountering. So we should find a path forward to better warn users if this is an anti-pattern.

Solution

If you're running into this, move any call of another store within the store definition:

Bad

import { defineStore } from 'pinia'
import { useUserStore } from '~/store/user'

const userStore = useUserStore()

export const useThemeStore = defineStore('theme', {
  state: () => ({
    name: 'theme-name'
  }),
  actions: {
    setTheme() {
      this.name += userStore.name
    }
  }
})

Good

import { defineStore } from 'pinia'
import { useUserStore } from '~/store/user'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    name: 'theme-name'
  }),
  actions: {
    const userStore = useUserStore()

    setTheme() {
      this.name += userStore.name
    }
  }
})

[posva]

Maybe the Composing Stores should be reordered and improved and the Using Stores section should point to a part of it.
I'm not sure we could detect this wrong usage at runtime to point the user to the right doc section

[bencodezen]

Yeah. This is tricky. It specifically happens on production builds of Nuxt 3. I wonder if this is something we should work with the team to improve? I'm not sure if it's a Pinia thing...

On the Pinia side, maybe if Pinia can't be found for some reason, we should point them to the docs in the error on when it's safe to initialize a store? I know you have some docs already mentioning this, but we could be more explicit (and I can help document this since I ran into this already if you want).

[martinszeltins]

I had the same problem without using Nuxt. The solution (as Ben pointed out) was to move the call to use the store inside of a method. Hopefully there will be a fix for this.

[Alqua]

for me I was simply missing the buildModules: [ '@pinia/nuxt' ]
which is not mentioned in the documentation if I am not mistaken: https://pinia.vuejs.org/ssr/nuxt.html

[JaidenDeChon]

@bencodezen you're a rockstar! I was getting this error just testing a Pinia store with Vitest, and not within a Nuxt app. Definitely something to remember for next time.

[null4bl3]

For anyone else encountering this issue, i have solved it by importing my store using the setup option for my nuxt vue component script tag:

<script setup>
   import { useTest } from "~/store/test";
   const test = useTest()
</script>

meaning that i added the <script setup> / setup option to where i imported the store.
It seems that the way vue / next renders vue components, uses initialized calls for script tags that has the setup option.

That or you can perform the initialization in the export default setup function, which will also act in the same way

<script>
import { useTest } from "~/store/test";
export default {
  setup() {
    const test = useTest()
    return { test }
  },
  methods: {
  }
}
</script>

[martinszeltins]

This obviously would not work if you call your store outside of <script setup> like from a module or service.