14

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
kissu
  • 40,416
  • 14
  • 65
  • 133
Clarity
  • 186
  • 1
  • 7
  • 3
    Can you try that one? https://github.com/vuejs/pinia/issues/1542#issuecomment-1238820465 – kissu Oct 09 '22 at 10:22
  • @kissu 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 – Clarity Oct 09 '22 at 10:47
  • What do you mean by "init pinia"? I can recommend giving a try to yarn too, works better for me. – kissu Oct 09 '22 at 10:48
  • 1
    @kissu 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 – Estus Flask Oct 09 '22 at 11:00
  • @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. – kissu Oct 09 '22 at 11:02
  • @kissu 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 – Clarity Oct 09 '22 at 11:12

4 Answers4

24

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
kissu
  • 40,416
  • 14
  • 65
  • 133
  • 2
    this works. forcing it can lead to further conflicts or package problems, but looks like it's the only working way for now. – Clarity Oct 17 '22 at 10:03
  • What about production server? – kanuos Dec 02 '22 at 22:37
  • 2
    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). @kanuos – kissu Dec 02 '22 at 23:19
  • How can this still be necessary today? Is this something the pinia project could work around? – katerlouis Feb 01 '23 at 10:12
  • @katerlouis there is probably a Github issue open for that one. – kissu Feb 01 '23 at 14:25
17

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
dust_bg
  • 405
  • 4
  • 15
0

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.

Leopold Kristjansson
  • 2,246
  • 28
  • 47
-1

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

Zeeshan Siddique
  • 39
  • 3