Cannot find module pinia\dist\pinia.prod.cjs when using npm package that exports pinia store only when deployed to vercel

[kimbaudi]

Reproduction

https://github.com/kimbaudi/vue3-nuxt-demo & https://github.com/kimbaudi/vue3tslibtest

Steps to reproduce the bug

• fork https://github.com/kimbaudi/vue3-nuxt-demo
• deploy to vercel from github

Expected behavior

When I deploy a nuxt project to vercel (that consumes an npm package that exports a pinia store), I expect the deployment to be successful without any issues.

Actual behavior

deploying a nuxt project to vercel (that consumes an npm package that exports a pinia store), causes a 500 error that module pinia\dist\pinia.prod.cjs cannot be found imported from npm package (@kimbaudi\vue3tslibtest).

Additional information

This issue is related to nuxt/nuxt#19847.

Before I deployed vue3-nuxt-demo to vercel, I was able to reproduce the issue locally during build (yarn build), but not dev (yarn dev). After a bit of searching, I discovered issue nuxt/nuxt#19847, which suggested adding the following to nuxt.config.ts file in my vue3-nuxt-demo project:

  nitro: {
    alias: {
      pinia: "pinia",
    },
  },

After adding the above configuration, the issue was resolved locally during build so I then proceeded to deploy to vercel. Unfortunately, the 500 cannot find module error exists after deploying to vercel.

Looking at nuxt/nuxt#19847 (comment), it seems that pinia must be installed as a Vue plugin and so it will not work in your server routes, which are run/processed entirely outside of a Vue context.

If this is the case, how can use pinia outside of a vue context in a nuxt project so that when I deploy to vercel I don't get the 500 cannot find module error?

[kimbaudi]

There are discussions mentioning this issue:

• [pinia] use of store in server endpoint throws an error when built for production nuxt/nuxt#15058
• Nuxt-3 build crashes when using pinia #1619
• Running Nuxt 3 with Pinia (SSR) builded version on Node causes problems #2156
• Import vite library with Pinia into Nuxt project throws #2216

Also, from nuxt/nuxt#15058 (comment):

You can't use pinia outside your Vue app in a nitro API route. Pinia is written to be consumed in a Vue environment. It might be possible to add this functionality to @pinia/nuxt though. Feel free to open a feature request there.

[CodeDredd]

The workaround is in issue: nuxt/nuxt#20128 😉

[kimbaudi]

So the workaround that resolved this issue for me is to add the following to nuxt.config.ts in my vue3-nuxt-demo project

export default defineNuxtConfig({
  build: {
    transpile: ["@kimbaudi/vue3tslibtest", "pinia"],
  },
});

Also, I commented out / removed the following from my nuxt.config.ts:

  // nitro: {
  //   alias: {
  //     pinia: "pinia",
  //   },
  // },

[kimbaudi]

It seems the main issue is that .output/server/node_modules/@kimbaudi/vue3tslibtest/dist/my-lib.js is importing pinia and expecting it to be in .output/server/node_modules/pinia/dist/pinia.prod.cjs, but there only exists .output/server/node_modules/pinia/dist/pinia.mjs

[CodeDredd]

You need to add this library also to transpile.