Import vite library with Pinia into Nuxt project throws

[andredewaard]

I have a personal library that handles authentication.
It will be used it multiple projects. (Vite/Nuxt).

The library handles the state with Pinia and is build with Vite where Pinia is set as an external dependency
Vite.config

  build: {
    target: 'esnext',
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'index',
      fileName: 'index'
    },
    rollupOptions: {
      external: ['vue', 'pinia'],
    }
  }

Now when i want to use this library in my Nuxt project it works fine during development. When building for production however it throws an error.

[unhandled] [500] Cannot find module '{nuxt_project}/.output/server/node_modules/pinia/dist/pinia.prod.cjs' imported from {nuxt_project}/.output/server/node_modules/{library}/dist/index.js

Installing @pinia/nuxt and/or pinia in the Nuxt project doesn't seem to solve this issue.

PS: The library it a private library so is not accessible for others.

[kimbaudi]

@andredewaard - I am facing the exact same issue. Have you looked at nuxt/nuxt#19847 (comment)? It suggests adding the following config to nuxt.config.ts:

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

This seems to resolve the issue locally on build (npm run build or yarn build). However, the error still occurs for me when I try to deploy to vercel.

I created a minimal repo:

• public npm package: https://github.com/kimbaudi/vue3tslibtest & https://www.npmjs.com/package/@kimbaudi/vue3tslibtest
• public github repo: https://github.com/kimbaudi/vue3-nuxt-demo

I also opened issues:

• Cannot find module pinia\dist\pinia.prod.cjs when using npm package that exports pinia store only when deployed to vercel nuxt/nuxt#21854
• Cannot find module pinia\dist\pinia when using npm package that exports pinia store only when deployed to vercel #2284

[DylanArens]

We have the exact same issue.
We have a private library in Vue3 (with Pinia) which we want to use in multiple Nuxt3 projects. Our Nuxt3 projects have their own Pinia (@pinia/Nuxt) and Pinia in the Vue3 library is set as an external dependency in the Vite configuration (just like @andredewaard did).
Running our Nuxt project (with the library) in development modus works just fine. Building Nuxt works just fine, but when we start Nuxt (with node .output/server/index.mjs) it causes the same issue to show up where it can't find pinia.prod.cjs.
Note that the given filename is not in the location (.output/server/node_modules/pinia/dist), but only a file with the name "pinia" instead of "pinia.prod". Does anyone know a workaround? Thank you in advance!

[CodeDredd]

@kimbaudi @DylanArens I don't know if it helps solving your problem, but i had this issue also in my library.
Here is the workaround i found:
nuxt/nuxt#20128

[DylanArens]

Hmm interesting. Thank you so much! Adding Pinia with the library in the transpile array seems to work.

[CodeDredd]

You need to add all libraries to transpile which are importing pinia. Also private ones

[kimbaudi]

@CodeDredd - adding my library to build.transpile resolve the issue. Thank you!

  build: {
    transpile: ["@kimbaudi/vue3tslibtest", "pinia"],
  },