Component that uses pinia in library mode can't be imported and reused in another app

[leopsidom]

Reproduction

I created a simple counter component that uses pinia to manage state: https://github.com/leopsidom/pinia-lib and build it in lib mode with vite and published it as an npm package here: https://www.npmjs.com/package/pinia-lib

Then I try to import the package from another Stackblitz app here: https://stackblitz.com/edit/github-yjj6ch?file=src/App.vue

Steps to reproduce the behavior

1. Go to stackblitz app
2. wait for page to load and open the browser console.

Expected behavior

The component should work

Actual behavior

It throws a pinia error when importing the component from anther app

pinia-lib.es.js:276 Uncaught TypeError: Cannot read properties of undefined (reading '_s')

Additional information

[posva]

you need to mark pinia as an external module in the bundling config. For vite that should be build.rollupOptions.external: ['pinia']

• https://vitejs.dev/config/#build-rollupoptions

[leopsidom]

Awesome. That works, thanks!

[depressedX]

So can I say it's recommended to use pinia as an external dependency in library mode? Because I just bundled pinia up with my Vue2 library and it worked fine in another vue2 app. So I'm not sure whether there be any potential problems.

[yaolunmao]

Is there any other way to avoid introducing piniainto new projects

[koyadume]

I encountered same issue today and can confirm that this is not working even after marking pinia as external module as suggested in #1073 (comment) comment.

[tony-nz]

Hey @koyadume, did you manage to figure this out?

[koyadume]

Hi @tony-nz , Yes I figured it out finally.

I had to pass pinia explicitly to various useXYZStore() pinia stores inside <script setup> of a component. For some reason it was unable to locate pinia inside a component even though I have registered it with Vue app. Here are the changes I did to make it work -

main.js

const pinia = createPinia()
app.use(pinia)
window.pinia = pinia

component

<script setup>
const xyzStore = useXYZStore(window.pinia)
</script>

[andresstbn]

Hi @koyadume
Have you been able to solve this without using "window.pinia"?

[renyuneyun]

@andresstbn I encountered this today as well, and the solution @koyadume posted did not work for me. Not sure if my case is the same as yours, but just in case useful, here it is.
I did some further attempts by creating a simple counting store (in my library), and use it in my App. That shows Pinia was correctly picked up. It turned out that I need to add all other external libraries to my build.rollupOptions.external: , because they are both used in my library and my App. Interesting, but it worked.
(For me, I do not need to use the trick @andresstbn did.)

[webmint]

@posva Hello. I've catched error TypeError: can't access property "_s", s is undefined on app in production mode. This app is using UI library, which is actually using Pinia (and its externalised).

So I've tried to create simple store from examples from pinia docs. Result was same - no error in dev mode but error in production mode. Version of pinia 2.1.0. But it was working. So i did changed version to 2.0.18 - and its worked. No error.

I think there is something wrong in 2.1.0 and higher. I cant confirm now that this error could appear from 0.19 to 0.36 - will check that tomorrow.

[renyuneyun]

@Flyingdot Hi. In my case, it turned out to be related to Quasar's static compilation, which in turn was because of my incorrect way of getting the store. See freddy38510/quasar-app-extension-ssg#379.
Although, as you can see, the issue was not closed, because I'm still encountering some issues with the suggested solution.

[botmaster]

Same issue here.
Any workaround ?

[liorchamla]

Bumping here since externalising with Rollup did not help, here is my vite configuration :

lib: {
  entry: resolve(__dirname, "src/index.ts"),
  name: "SharedComponents",
  formats: ["es", "umd"],
  fileName: (format: string) => `shared-components.${format}.js`,
},
rollupOptions: {
  // Exclude dependencies from the bundle
  external: ["vue", "pinia"],
  output: {
    globals: {
      vue: "Vue",
      pinia: "Pinia",
    },
  },
},

This works very well on dev mode but get the "_s" issue once builded ...

[itcrdd]

spend the whole day to get a fix for this trying rollupOptions with vite but with no success , can confirm solution from koyadume, my solution was:

app.use(pinia); setActivePinia(pinia); (window as any).pinia = pinia

and then on state of my pinia store add the pinia store from shared package:
baseStore: useBaseStore((window as any).pinia)

[liorchamla]

Thank u, but I don't think this could work on SSR since window won't exist :'( anyway, I deleted Pinia from my librarie, a composable was good enough