Pinia not working

[mblachlov24]

Environment

• Operating System: Linux
• Node Version: v16.16.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: npm@8.11.0
• Builder: vite
• User Config: modules, buildModules, colorMode, typescript, experimental, vite
• Runtime Modules: @nuxtjs/tailwindcss@5.3.2, @nuxtjs/color-mode@3.1.4, @vueuse/nuxt@9.1.0
• Build Modules: @pinia/nuxt@0.4.0

Reproduction

I installed the pinia, added it to buildModule and got an error when starting nuxt.
It worked fine on the RC 6.

Describe the bug

 ERROR  Cannot start nuxt:  Cannot find module 'pinia/dist/pinia.mjs'                                                                                                                                                10:34:41
Require stack:
- /home/nuxt3/index.js

  Require stack:
  - index.js
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
  at Function.resolve (node:internal/modules/cjs/helpers:108:19)
  at Function._resolve [as resolve] (node_modules/jiti/dist/jiti.js:1:108181)
  at resolveModule (node_modules/@pinia/nuxt/node_modules/@nuxt/kit/dist/index.mjs:276:29)
  at setup (node_modules/@pinia/nuxt/dist/module.mjs:22:32)
  at Object.normalizedModule (node_modules/@pinia/nuxt/node_modules/@nuxt/kit/dist/index.mjs:607:29)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:448:3)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:1495:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6768:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6813:5)

Additional context

No response

Logs

No response

[516310460]

would you please provide a reporduction?

[DamianGlowala]

Not sure if that's related, but (weirdly) I had to explicitly add pinia as a project dependency.

Let me know whether that works for you.

[BenjaminOddou]

Hello @mblachlov24, I think you could try this in the nuxt.config.ts file :

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: [ //instead of buildModules
    '@pinia/nuxt'
  ],
})

then try to remove package-lock.json and node_modules folder following by npm install command

[mblachlov24]

Hello @mblachlov24, I think you could try this in the nuxt.config.ts file :

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: [ //instead of buildModules
    '@pinia/nuxt'
  ],
})

then try to remove package-lock.json and node_modules folder following by npm install command

It looks like it's working. However, auto import doesn't work now.

    modules: [
        [
            '@pinia/nuxt',
            {
                autoImports: [
                    // automatically imports `usePinia()`
                    'defineStore',
                    // automatically imports `usePinia()` as `usePiniaStore()`
                    ['defineStore', 'definePiniaStore'],
                ],
            },
        ],
    ],

500
useCounterStore is not defined

[516310460]

autoImports

I don't understand. I know the problem. Please provide a copy
Link: https://stackblitz.com/

[Lyokolux]

I updated to RC 8 with @pinia/nuxt@0.4.0 OR @pinia/nuxt@0.3.0

I get with both the following error in development, and the project does not build anymore:

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.

[DamianGlowala]

@Lyokolux I'm getting the same error when I spin up the development server for the 'first time', but once I kill the process and start it again, the error is gone. Is it the same for you?

[Lyokolux]

@Lyokolux I'm getting the same error when I spin up the development server for the 'first time', but once I kill the process and start it again, the error is gone. Is it the same for you?

Yes, I am currently experiencing it. The server starts correctly though. I get a router is undefined with a warning [Vue warn]: injection "Symbol(router)" not found. (maybe related to #14595)

EDIT: after relaunching the server a third time, it works 🤔

[Lyokolux]

I spotted the following change in tsconfig.json:
the path for pinia moved from pinia/dist/pinia to node_modules/pinia/dist/pinia

[danielroe]

Would you try clearing your node_modules/.vite and node_modules/.cache folders?

[Lyokolux]

Would you try clearing your node_modules/.vite and node_modules/.cache folders?

It was something related to the cache because it is working now.

Updating @pinia/nuxt does not clean this cache as npx nuxi-edge@latest upgrade --force does, and I missed the information.

[danielroe]

Great. Let's track the root cause in #14604.

[pi0]

npx nuxi-edge@latest cleanup should also do the trick to cleanup caches.

[typhoon11]

Still the same problem for me, I am not able to fix the problem with above solutions.

[Lyokolux]

Still the same problem for me, I am not able to fix the problem with above solutions.

What is your error?

[typhoon11]

Still the same problem for me, I am not able to fix the problem with above solutions.

What is your error?

ERROR Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs' 14:10:55
Require stack:

• D:\Dashboard\frontend\index.js

  Require stack:

  • index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Function._resolve [as resolve] (node_modules\jiti\dist\jiti.js:1:243252)
    at resolveModule (/D:/Dashboard/frontend/node_modules/@nuxt/kit/dist/index.mjs:254:29)
    at setup (/D:/Dashboard/frontend/node_modules/@pinia/nuxt/dist/module.mjs:22:60)
    at Object.normalizedModule (/D:/Dashboard/frontend/node_modules/@nuxt/kit/dist/index.mjs:630:29)
    at async installModule (/D:/Dashboard/frontend/node_modules/@nuxt/kit/dist/index.mjs:449:3)
    at async initNuxt (/D:/Dashboard/frontend/node_modules/nuxt/dist/index.mjs:1553:7)
    at async load (/D:/Dashboard/frontend/node_modules/nuxi/dist/chunks/dev.mjs:6778:9)
    at async Object.invoke (/D:/Dashboard/frontend/node_modules/nuxi/dist/chunks/dev.mjs:6826:5)

[danielroe]

If you are facing an error, please raise a new issue with a reproduction. You can start from https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz.

[typhoon11]

If you are facing an error, please raise a new issue with a reproduction. You can start from https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz.

I am not able to reporduce in the stackblitz, but it's happening to me

[CareTiger]

I am getting the same error. - ERROR Cannot start nuxt: Cannot find module '@pinia/nuxt'

I tried all the above suggestions and still no fix.

[BenjaminOddou]

Also a common mistake could be that you installed pinia instead of @pinia/nuxt.

[typhoon11]

Also a common mistake could be that you installed pinia instead of @pinia/nuxt.

No I have installed pinia/nuxt and not pinia because you can't install pinia on nuxt 3 it gives error from npm

[BenjaminOddou]

@typhoon11, I didn't know about that feature. Maybe you can try to remove node_modules, package-lock.json, .nuxt and .output, then do a npm i and npm run dev ?

I can just share to you my setup which is working fine :

In package.json

  "devDependencies": {
    "@pinia/nuxt": "^0.4.2",
  }

In nuxt.config.ts

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

In composables/piniaStore.ts

import { defineStore } from 'pinia'

export const myStore = defineStore({
  id: 'my-store',
  state: () => {
    return {
      isReady: false
    }
  }
})

In my application :

const test = myStore()
onMounted(() => {
  test.$patch({
    isReady: true
  })
  console.log(test.isReady)
})

Hope it will help. 🙂

[typhoon11]

@typhoon11, I didn't know about that feature. Maybe you can try to remove node_modules, package-lock.json, .nuxt and .output, then do a npm i and npm run dev ?

I can just share to you my setup which is working fine :

In package.json

  "devDependencies": {
    "@pinia/nuxt": "^0.4.2",
  }

In nuxt.config.ts

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

In composables/piniaStore.ts

import { defineStore } from 'pinia'

export const myStore = defineStore({
  id: 'my-store',
  state: () => {
    return {
      isReady: false
    }
  }
})

In my application :

const test = myStore()
onMounted(() => {
  test.$patch({
    isReady: true
  })
  console.log(test.isReady)
})

Hope it will help. 🙂

I will try doing this, btw on which nuxt version you are on I am on the latest rc9

[BenjaminOddou]

I am also on rc-9. I have this config since rc-4 or 5 and didn't experience any issue

[typhoon11]

I am also on rc-9. I have this config since rc-4 or 5 and didn't experience any issue

I did like you told but same error is coming.

Error:

Package.json

[henk23]

I updated my comment. Also at some point had do npm i pinia. Don't remember why, but needed to be done.

[BenjaminOddou]

@henk23 probably because of the pinia location in the project (it's actually included in pinia/nuxt) so

import something from 'pinia'

can throw an error if didn't recognize as '/node_modules/@pinia/nuxt/node_modules/pinia/dist/pinia.mjs'

[samlinck]

Switching from npm to yarn did the trick for me. I had similar problems when trying to install the pinia persisted state plugin. They were also solved after the switch.

[ricardoaat]

Had the exact same issue ERROR Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs'
on a newly created nuxt 3 app with just vuetify's library installed.

Trying to install pinia didn't work so had to force it with:
npm i --force pinia

That solved my problem.

[dreamtank89]

Just sharing my experience, from what I have tried. There are 2 ways to use pinia with Nuxt.

1. Using '@pinia/nuxt'
2. Using pinia (this is for vue 3 not for nuxt)

I tried the first method and my app crash big time no matter what I try to do.

But with the 2nd method it is much more easier without any problem.

I just run npm install pinia --force

Then I declare using Nuxt plugin with this setup

import { createPinia } from "pinia";

export default defineNuxtPlugin((nuxtApp) => {
	const pinia = createPinia();
	nuxtApp.vueApp.use(pinia);
});

Then I just use pinia in my composables.

Hope this helps

[dreamtank89]

Just sharing my experience, from what I have tried. There are 2 ways to use pinia with Nuxt.

1. Using '@pinia/nuxt'
2. Using pinia (this is for vue 3 not for nuxt)

I tried the first method and my app crash big time no matter what I try to do.

But with the 2nd method it is much more easier without any problem.

I just run npm install pinia --force

Then I declare using Nuxt plugin with this setup

import { createPinia } from "pinia";

export default defineNuxtPlugin((nuxtApp) => {
	const pinia = createPinia();
	nuxtApp.vueApp.use(pinia);
});

Then I just use pinia in my composables.

Hope this helps

Update latest

It turns out that we need to install both package with the first and second method that I mentioned here.

[jmoncadaleiva]

I tried this and it worked for me.
Remove node-modules/ and package-lock.json.
Migrate from npm to yarn by simply using
yarn install

[affinage-digital]

This helped in my case

export default defineNuxtConfig({
    modules: [
        ['@pinia/nuxt', { autoImports: ['defineStore'] }], // v 0.4.6
    ],
    alias: {
        pinia: process.env.NODE_ENV === 'production' ? '/node_modules/pinia/dist/pinia.mjs' : '/node_modules/@pinia/nuxt/node_modules/pinia/dist/pinia.mjs',
    },
});

[ekawas-td]

This isn't the correct solution but I am posting it here because it worked for our app (and might help others)...

We have are using the following in our package file as dependencies:

"@pinia/nuxt": "^0.4.6",
"pinia": "^2.0.27",

The app is built with npx nuxt build

We had the same issue as others (couldn't find the pinia module) and aliases didn't help, nor did build.transpile. In our production dockerfile container, I ran the following copy:

RUN cp .output/server/node_modules/pinia/dist/pinia.mjs .output/server/node_modules/pinia/dist/index.mjs

The app could then start up and handle requests.

[productdevbook]

export default defineNuxtConfig({
  imports: {
    dirs: ['stores'],
  },
    modules: [
    '@pinia/nuxt',
    ]
})

pnpm i @pinia/nuxt
pnpm i pinia

and working

[productdevbook]

When I restart it, it still gives an error even though it is in import.d.ts. Interesting.

settings

  imports: {
    dirs: ['stores'],
  },

export { useMap } from '../src/composables/useMap';
export { InitApp } from '../src/utils/initApp';
export { useMapStore } from '../src/stores/useMapStore';
export { useUserStore } from '../src/stores/useUserStore';

Uncaught (in promise) ReferenceError: useUserStore is not defined

[productdevbook]

When I restart it, it still gives an error even though it is in import.d.ts. Interesting.

export { useMap } from '../src/composables/useMap';
export { InitApp } from '../src/utils/initApp';
export { useMapStore } from '../src/stores/useMapStore';
export { useUserStore } from '../src/stores/useUserStore';

Uncaught (in promise) ReferenceError: useUserStore is not defined

header.vue click and ctrl + s fixed. and pnpm dev reload. Same problem go ctrl + s fixed :D

[mihul87]

Had the exact same issue ERROR Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs'.
I'm a newbie.
I tried to reproduce the error on the https://stackblitz.com/ like Daniel said, but I couldn't.
Then I observed that the initial setup in stackblitz, it's a bit different that mine.
This scenario worked for me, up to know:

1.	npx nuxi init <project-name>
2.	cd <project-name>
3.	skiped npm install
4.	npm install @pinia/nuxt
5.	added Auto imports
6.	npm install
7.	npm run dev

[shba007]

To reliably solve this problem you can do this following steps:

1. Open package-lock.json
2. Find "node_modules/@pinia/nuxt/node_modules/pinia" this package
3. Rename "node_modules/@pinia/nuxt/node_modules/pinia" -> "node_modules/pinia"
4. Remove node-modules , run nuxt cleanup and npm install
5. Now run nuxt dev

This problem occurs in npm not yarn, if you run npm update it will reoccur then you have to redo the steps

[timothymarois]

I am having same issue as @Lyokolux when trying to put stores into compostables. It doesn't appear to work. And yes, pinia is installed and the same stores are working elsewhere just fine.

[nuxt] [request error] [unhandled] [500] [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?

[cerinoligutom]

I tried using pnpm for a change and I didn't encounter this anymore unlike with npm.

[madebyfabian]

Hey there, I'd suggest we can close this, not being a nuxt issue but an issue on how to properly configure pinia and or upgrade nuxt to the latest versions. Or this there anything in here that nuxt can fix I may have missed?

[BayBreezy]

For those getting the error while installing, did we add the overrides object to the package.json file?

[danielroe]

I realise people are still having trouble configuring pinia with Nuxt and would love to help solve this. If you are able, would you instead create an upstream issue in the pinia repository? Feel free to tag me and I will do my best to help.

Having said that, I don't believe this is an issue with Nuxt so I'm closing here, for now at least. 🙏

[vedmant]

In my case I started to have error: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/project/.output/server/node_modules/pinia/dist/pinia' imported from /Users/project/.output/server/index.mjs
After I tried to use pinia store from server nitro plugin. I don't think it's a pinia issue, it works with yarn dev but doesn't work when project is built.

[darren-h-gill]

I had this problem too. It came from "nowhere".

I have now resolved it after trying all of the above without success.

In ny case I decided to try and replicate a working setup from scratch. I started a new project using:-

npx nuxi create

then as soon as I ran yarn install I got the "name" error!

So, the conclusion for me was my Node installation was bad.

I ran
> node --version
and found that I had 19.7!!

The moral of the story is stick to using lates LTS.

So, after getting myself to node 18.15.0 , running
npx nuxi prepare

all is well for me. So, my advice is if strange errors like this then check your Node version.

Also, dont run this:
nvm install latest

Always install the version you want!

[AuroraTea]

Same Node version, same code, at first it worked fine for me, my coworker gets this error. Today I'm working on another project with the same code, and it's my turn to get this error.

"nuxt": "^3.6.5",
"@pinia/nuxt": "^0.4.11",

Then after I updated nuxt to nuxt 3.8.0 everything worked also not fine!

"@pinia/nuxt": "^0.5.1",
"nuxt": "^3.8.0",

( I updated nuxt first but it didn't work. )

[Bobakanoosh]

With:

• pnpm
• nuxt 3
• cloudflare pages

I fixed this by:

• deleting node_modules
• deleting lock file
• installing pinia^2.1.6 (i believe this was the key)
• @pinia/nuxt^0.5.1
• nuxt^3.8.1

[steffolino]

Hi, I am also experiencing the error
Cannot find module 'pinia' or its corresponding type declarations.
when trying to do this:
import {defineStore} from 'pinia';
with these packages:
"devDependencies": { "@nuxt/devtools": "latest", "@nuxt/eslint-config": "^0.2.0", "@nuxtjs/eslint-module": "^4.1.0", "@nuxtjs/i18n": "^8.0.0-rc.5", "@nuxtjs/tailwindcss": "^6.10.1", "@pinia/nuxt": "^0.5.1", "eslint": "^8.54.0", "nuxt": "^3.8.2", "sass": "^1.69.5", "vue": "^3.3.8", "vue-router": "^4.2.5" }

is it intended to use both packages 'pinia' and '@pinia/nuxt' when working with nuxt or should '@pinia/nuxt' be sufficient?

[zee-shan000]

Please add this into your nuxt.config.js/ts

alias: { pinia: "/node_modules/@pinia/nuxt/node_modules/pinia/dist/pinia.mjs", },