Using pages directory and Pinia 3.x => build is throwing errors

[cfroe]

Reproduction

https://stackblitz.com/edit/nuxt-starter-mpmvrtyh?file=package.json

Steps to reproduce the bug

Hi,

I placed the problem 2 weeks ago as a nuxt issue nuxt/nuxt#32655

But until now nothing happened at all, so I try it here as well

After trying different settings for a longer time, I was able to identify the problem with a minimal starter.

The problem occurs if I use pages directory and Pinia latest version, see the provided example.

Everything is working fine, if I stay with Nuxt 3.16 and Pinia 2.3.1. If I use Pinia 3.x and latest Nuxt (3.17.7 or 4.0.0) the build is throwing errors. In developer mode everything is ok. If I preview the build directly in my developer location it's also ok. If I copy the .output folder outside of my project or to a webserver the build crashes.

If I should place the bug somewhere else please correct me.

Thanks for your help

Christoph

Expected behavior

Should work

Actual behavior

Throwing errors

Additional information

[request error] [unhandled] [GET] http://localhost:3000/
 H3Error: Cannot find package 'C:\localhost\.output\server\node_modules\vue-router\node_modules\@vue\devtools-api\index.js' imported from C:\localhost\.output\server\node_modules\vue-router\dist\vue-router.mjs
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    ... 7 lines matching cause stack trace ...
    at ModuleJob._link (node:internal/modules/esm/module_job:130:49) {
  cause: Error: Cannot find package 'C:\localhost\.output\server\node_modules\vue-router\node_modules\@vue\devtools-api\index.js' imported from C:\localhost\.output\server\node_modules\vue-router\dist\vue-router.mjs
      at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
      at packageResolve (node:internal/modules/esm/resolve:860:14)
      at moduleResolve (node:internal/modules/esm/resolve:946:18)
      at defaultResolve (node:internal/modules/esm/resolve:1188:11)
      at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:642:12)
      at #cachedDefaultResolve (node:internal/modules/esm/loader:591:25)
      at ModuleLoader.resolve (node:internal/modules/esm/loader:574:38)
      at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:236:38)
      at ModuleJob._link (node:internal/modules/esm/module_job:130:49) {
    code: 'ERR_MODULE_NOT_FOUND'
  },
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: undefined,
  data: undefined
}
[request error] [unhandled] [GET] http://localhost:3000/__nuxt_error?error=true&url=%2F&statusCode=500&statusMessage=Server+Error&message=Server+Error
 H3Error: Cannot find package 'C:\localhost\.output\server\node_modules\vue-router\node_modules\@vue\devtools-api\index.js' imported from C:\localhost\.output\server\node_modules\vue-router\dist\vue-router.mjs
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    ... 7 lines matching cause stack trace ...
    at ModuleJob._link (node:internal/modules/esm/module_job:130:49) {
  cause: Error: Cannot find package 'C:\localhost\.output\server\node_modules\vue-router\node_modules\@vue\devtools-api\index.js' imported from C:\localhost\.output\server\node_modules\vue-router\dist\vue-router.mjs
      at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
      at packageResolve (node:internal/modules/esm/resolve:860:14)
      at moduleResolve (node:internal/modules/esm/resolve:946:18)
      at defaultResolve (node:internal/modules/esm/resolve:1188:11)
      at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:642:12)
      at #cachedDefaultResolve (node:internal/modules/esm/loader:591:25)
      at ModuleLoader.resolve (node:internal/modules/esm/loader:574:38)
      at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:236:38)
      at ModuleJob._link (node:internal/modules/esm/module_job:130:49) {
    code: 'ERR_MODULE_NOT_FOUND'
  },
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: undefined,
  data: undefined
} 

[cfroe]

Hi, I placed this topic as a bug this morning, now it was moved to dicussions. No problem for me, but could someone write more information?

• Is it related to Nuxt => wrong place?
• Are we doing/trying something in the wrong way? Any hints?
• Is it not reproducable? Do you need more information?

Thanks

Christoph

[richgcook]

I get this often and more often than not it's to do with Pinia v3, pinia/nuxt and nuxt. I'm not sure exactly what the issue is, unfortunately, but for every new project I try to update all my dependencies but never can due to some conflict with Pinia. I always keep having to change the version to to get it to work as it's not obvious where the error is coming from.

[Cliff-River]

Edit Nuxt comfiguration.

export default defineNuxtConfig({
 ... some config

  build : {
    transpile : [
      "vue-router"
    ]
  }
});

[cfroe]

Thanks a lot, it's working. Wonder why not more other people have the same problem

Christoph

[Cliff-River]

I think because that it can be fixed by installing vue-router package manually in the .output/server folder built from nuxt.
When I first encounter this problem, I do that, but I found the size of the output folder is growth increasingly.