Cannot find module 'pinia/dist/pinia.mjs' when using run dev

Question

I setup Pinia on top of fresh Nuxt3 app and start dev server, with exactly these commands in order:

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm install @pinia/nuxt
npm run dev

Dev server runs without any problem. Then, i put this line of code into "nuxt.config.ts";

export default defineNuxtConfig({
  modules: ["@pinia/nuxt"],
});

And, when I again try to connect to dev server, it gives me this error message in terminal:

 ERROR  Cannot start nuxt:  Cannot find module 'pinia/dist/pinia.mjs'                                                                     12:03:55
Require stack:
- C:\Users\user\Documents\github2\nuxt-app\index.js

Bile

Can you try that one? github.com/vuejs/pinia/issues/1542#issuecomment-1238820465 – Marikomaril

@Marikomaril thank you, this works. I've seen this one but it felt not the best way to init Pinia, because Pinia's nuxt3 setup page doesn't mention this. But it turns out there's no any other way actually. This is a big mess to take energy of a junior dev so i'll give the info i took from every doc-forum in the bottom message – Bile

What do you mean by "init pinia"? I can recommend giving a try to yarn too, works better for me. – Marikomaril

@Marikomaril A good finding. As much as I'd like to stick to default pm, I always end up using yarn, just because it works where npm fails – Seismoscope

@EstusFlask yeah, for me it's usually PNPM > yarn > npm (PNPM being the best). It works nicely, better output and you don't have to mess up with peerDeps or related stuff just getting into your way. – Marikomaril

@Marikomaril I wasn't able to handle this problem with yarn too. Nvm thank you so much. I wrote everything about this unnecessary challenge that i've gained experience throughout the week – Bile

Answer 1

As mentioned here, there is an issue with NPM not doing it's job properly, here is how you can solve it:

npm i pinia -f

Marikomaril

this works. forcing it can lead to further conflicts or package problems, but looks like it's the only working way for now. – Bile

What about production server? – Jigaboo

If you run npm i pinia -f locally, I'm pretty sure some of your files may change, like the package-lock.json or alike. In production, your node_modules are always wiped, if it's not the case you should probably run a cache reset of some sort (depends where you do host your app). @Jigaboo – Marikomaril

How can this still be necessary today? Is this something the pinia project could work around? – Nalley

@Nalley there is probably a Github issue open for that one. – Marikomaril

Answer 2

As I know this is a bug that will be fixed someday. Until then you can put

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

in your nuxt.config.ts and it will work.

Found from this VueSchool lesson on Pinia.

Goodwife

Got an official source for that bug? – Marikomaril

No. I found it in video lesson here: vueschool.io/lessons/global-state-management-with-pinia and it works for me. – Goodwife

Oh, I don't have a paid subscription but it's a legit link and a nice source indeed! – Marikomaril

you may have to surround key pinia with quotes alias: { 'pinia': "/node_modules/@pinia/nuxt/node_modules/pinia/dist/pinia.mjs" }, – Kremenchug

still not fixed in feb 2023 :( – Nalley

@Nalley at least the fix is simple. – Marikomaril

this is still the fix in 2024, thanks – Furlani

Answer 3

I run into this a bit with fresh Nuxt 3 projects after installing @pinia/nuxt. The following has always worked for me.

1. Delete the node_modules folder.
2. Delete the package-lock.json file.
3. Make sure Pinia is the last item in the modules array modules: ['a', 'b', 'c', '@pinia/nuxt'],
4. Do a fresh npm install.

There should be no need to install pinia separately, having @pinia/nuxt should be enough.

Trituration

This is the correct answer! I tried: 1. npm install pinia -f - No joy 2 Aliasing pinia - still no joy 3. yarn (a full refresh before trying yarn) - same error 4. this answer - it works! I wish I had tried this first – Bayard

Answer 4

You need to install pinia itself.

npm i pinia

But you might need to add the following line to your package.json file before running the above command.

"overrides": {
    "vue": "latest"
}

Limey

Answer 5

Please install using Yarn yarn add @pinia/nuxt instead of npm.

Allveta

Answer 6

I got the error ERROR Cannot find module 'pinia/dist/pinia.mjs' when using the following dependencies in my Nuxt project:

"devDependencies": {
    "@nuxt/devtools": "latest",
    "nuxt": "^3.9.0",
    "nuxt-primevue": "^0.2.2",
    "vue": "^3.4.14",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primevue": "^3.46.0"
  }

The solution was to ignore the Nuxt documentation and use the documentation from Pinia which suggests the following steps:

1. Install dependency: npm install pinia @pinia/nuxt

2. Add module in nuxt.config.ts

// Nuxt 3
export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
})

Swiercz