Pinia stores imported from npm packages are not reactive or don't share the same context

[waldemarennsaed]

Reproduction

Apparently, using exported pinia-stores from npm packages doesn't work as expected. There seems to be an issue with either the context pinia is running in (and conflicts with the one of the consuming application) or the reactivity is somehow broken.

Steps to reproduce the bug

The reproduction contains multiple steps, as creating a local npm package and use it in your vue application as an import. Let's go through it step by step.

Create the local npm package

Using:

• [email protected]
• [email protected]
• @vue/[email protected]

Start with the basic steps:

> mkdir pinia-package-test && cd pinia-package-test

Create a package.json that will take care of the module bundling, entry-point, etc. I use the following one:

{
  "name": "pinia-test-package",
  "version": "1.0.0",
  "type": "module",
  "files": [
    "build"
  ],
  "main": "./build/pinia-test-package.umd.cjs",
  "module": "./build/pinia-test-package.js",
  "exports": {
    ".": {
      "import": "./build/pinia-test-package.js",
      "require": "./build/pinia-test-package.umd.cjs"
    }
  },
  "scripts": {
    "build": "vite build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@vue/reactivity": "^3.4.27",
    "pinia": "^2.1.7"
  },
  "devDependencies": {
    "vite": "^5.2.11"
  }
}

I add a simple pinia store called /src/counter.js. Create your /src directory and paste the following inside your /src/counter.js file:

import { ref } from '@vue/reactivity'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counterStore', () => {
    const count = ref(0)

    function increment() {
        count.value++
    }

    function decrement() {
        count.value--
    }

    return {
        count,
        decrement,
        increment
    }
})

For the vite.config.js I use the following configuration:

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/counter.js'),
      fileName: 'pinia-test-package',
      name: 'pinia-test-package'
    },
    outDir: 'build',
    rollupOptions: {
      external: ['pinia']
    },
    sourcemap: true
  },
  plugins: []
})

Install the package dependencies:

npm install

Now build the package:

npm run build

That will create an output directory, containing all the relevant package files /build.

Since the package.json configuration points at that directory to get the entry file, we can safely continue with the next step: Create the application that will install the created pacakge.

Create the wrapper app

⚠️ For the ease of reproduction, have your npm-package directory pinia-test-package next to your newly created pinia-test-wrapper package, as following:

• /parent
  • /pinia-test-package
  • /pinia-test-wrapper

For this, I am using a simple vite/vue3 application. Scaffolding it as the documentation points out:

npm create vite@latest pinia-package-wrapper -- --template vue

Then follow the instructions of the CLI:

• cd pinia-package-wrapper
• npm install
• npm run dev

Now a dev-server will be running at port 5173.

🆙 For the ease of testing, I removed the HelloWorld.vue component and removed it's usage from the App.vue component.

Now, install pinia:

npm i -S pinia

Now, install your local npm package (the pinia-test-package that you have created in the first step):

npm i -S ../pinia-test-package

Assuming, that your directories (package & wrapper) are placed side-by-side, as described in the beginning of this section.

Install pinia in your main.js. Your main.js should look like this:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

In your App.vue now import the package and use it. I implemented a simple counter-headline and two buttons to increment and decrement the counter value. Your App.vue might look like this:

<script setup>
import { useCounterStore } from 'pinia-test-package'

const store = useCounterStore()

function incrementCounter() {
  store.increment()
}

function decrementCounter() {
  store.decrement()
}
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>

    <h2>Counter: {{ store.count }}</h2>

    <button @click="incrementCounter">+1</button>
    <button @click="decrementCounter">-1</button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

In the end, your app should look like this:

Explanation:

The goal is to use the counter store-value that we defined in our pinia-package and use it's actions increment & decrement respectively. We want to interact with the pinia-stores count value by using it's defined actions.

Expected behavior

Clicking the buttons should update the pinia-store counter and increment/decrement the count state. Also the UI should update immediately and display the value correctly.

Actual behavior

When clicking the buttons, nothing happens. Here is a short video:

Bildschirmaufnahme.2024-05-21.um.19.19.34.mov

Notice, while inspecting the pinia store by using the vue-dev-tools (using the ones for chrome), the state does not get updated reactively, but only as soon as I reload the state within my dev-tools:

Bildschirmaufnahme.2024-05-21.um.19.22.45.mov

Additional information

I also tried using the storeToRefs() function that pinia provides, within my App.vue to destructure the count variable but it didn't help at all.

[kevinramharak]

Before I dive into fully reproducing this, your vite config states:

    rollupOptions: {
      external: ['pinia']
    },

Is there a reason you are not externalizing vue or @vue/reactivity itself as well? Or not just setting it to true.
If vite bundles your package with a bundled version of reactivity, it will break reactivity (as I found out when publishing some vue components and being confused why reactivity did not work).

[waldemarennsaed]

Well spotted, I will definitely try that out today and provide feedback 👍

[waldemarennsaed]

So I updated my vite.config.js to this:

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/counter.js'),
      fileName: 'pinia-test-package',
      name: 'pinia-test-package'
    },
    outDir: 'build',
    rollupOptions: {
      external: ['pinia', '@vue/reactivity']
    },
    sourcemap: true
  },
  plugins: []
})

Then re-installed the pacakge (local installation) in my other package:

npm i -S ../pinia-test-package

And tried it out again - without any success.

[kevinramharak]

I reproduced your case, both with and without @vue/reactivity marked as external. If you add these console.logs, you will see the state does get updated, and the effect from @vue/reactivity does trigger on changes. But using watch from vue does not:

// counter.js
import { ref, effect } from '@vue/reactivity'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counterStore', () => {
    const count = ref(0)

    function increment() {
        console.log(`pinia-package-test: increment to ${count.value + 1}`);
        count.value++
    }

    function decrement() {
        console.log(`pinia-package-test: decrement to ${count.value - 1}`);
        count.value--
    }

    effect(() => {
        console.log(`pinia-package-test: count is now: ${count.value}`);
    }, { });

    return {
        count,
        decrement,
        increment
    }
})

<script setup>
// App.vue
import { useCounterStore } from 'pinia-test-package'
import { watch } from 'vue'

const store = useCounterStore()

function incrementCounter() {
  console.log(`pinia-package-wrapper: incrementCounter to ${store.count + 1}`)
  store.increment()
}

function decrementCounter() {
  console.log(`pinia-package-wrapper: decrementCounter to ${store.count - 1}`)
  store.decrement()
}

watch(() => store.count, (count) => {
  console.log(`pinia-package-wrapper: count changed to ${count}`)
})
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>

    <h2>Counter: {{ store.count }}</h2>

    <button @click="incrementCounter">+1</button>
    <button @click="decrementCounter">-1</button>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

I decided to check in the @vue/reactivity readme, and there I found this:

This package is inlined into Global & Browser ESM builds of user-facing renderers (e.g. @vue/runtime-dom), but also published as a package that can be used standalone. The standalone build should not be used alongside a pre-bundled build of a user-facing renderer, as they will have different internal storage for reactivity connections. A user-facing renderer should re-export all APIs from this package.

I think that is the source of your problem. If you intend to use it with vue, I would suggest using vue as a dependency of your store and using the reactive API from that package. When I change the store package to use that it works as expected.

[waldemarennsaed]

That solved it for me as well! Thank you very much for reproducing this issue and also researching for the reasons it doesn't work. Really appreciate that 🙏