Fails to init pinia store on build with pnpm@7

[lukashroch]

Reproduction

https://github.com/lukashroch/pinia-pnpm-debug

Steps to reproduce the bug

npm install -g pnpm
git clone https://github.com/lukashroch/pinia-pnpm-debug
cd pinia-pnpm-debug
pnpm install
cd apps/admin
pnpm build
pnpm start

open localhost:3200
open dev console

it fails with:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_s')
    at o (pinia.mjs:1702:20)
    at guards.ts:7:18
    at m (vue-router.esm.js:2362:7)
    at n (vue-router.esm.js:2087:9)
    at wa (vue-router.esm.js:2095:3)
    at ge.confirmTransition (vue-router.esm.js:2392:3)
    at ge.transitionTo (vue-router.esm.js:2260:8)
    at G.init (vue-router.esm.js:2996:13)
    at W.beforeCreate (vue-router.esm.js:1298:22)
    at Ce (vue.runtime.esm.js:3015:61)

Expected behavior

Pinia stores should be initialized with no error.

Actual behavior

Built vue app for production fails to load pinia stores:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_s')
    at o (pinia.mjs:1702:20)
    at guards.ts:7:18
    at m (vue-router.esm.js:2362:7)
    at n (vue-router.esm.js:2087:9)
    at wa (vue-router.esm.js:2095:3)
    at ge.confirmTransition (vue-router.esm.js:2392:3)
    at ge.transitionTo (vue-router.esm.js:2260:8)
    at G.init (vue-router.esm.js:2996:13)
    at W.beforeCreate (vue-router.esm.js:1298:22)
    at Ce (vue.runtime.esm.js:3015:61)

Additional information

I'm trying migrate from pnpm@6 to pnpm@7 and stumbled upon pinia store init fail.

This works without any issues with current outlined setup in repo and pnpm@6. But when upgraded to pnpm@7, vue app production built fails with above error. Though dev server (pnpm dev) still works with no issues.

Example is monorepo with:

• apps (various apps including couple of [email protected])
• packages (various common code etc)

packages/ui includes some UI shared code, including boostraping pinia and common stores.

Issue seems to be related that the code is pulled from packages area. If I gradually move the code to the app itself,

i.e. swapping commented import in these three parts:

https://github.com/lukashroch/pinia-pnpm-debug/blob/master/apps/admin/src/app.vue
https://github.com/lukashroch/pinia-pnpm-debug/blob/master/apps/admin/src/stores/index.ts
https://github.com/lukashroch/pinia-pnpm-debug/blob/master/apps/admin/src/main.ts

It then starts to work. Though this would prevent from sharing any common UI code between couple of vue.js apps.

I'm not sure if it's pinia bug or something else as this worked with pnpm@6. Pnpm@7 works a bit differently with resolving deps, like peers, but none are missing as far as I can tell. I tried also auto peer install or few hoisting pnpm configs but with no luck.

[lukashroch]

@posva I guess it's not a bug in pinia since you converted it to Q/A, is that right?

Is there a recommendation how to use it in monorepo setup and pnpm? As there seems to be some regression :-/

[lukashroch]

Just found out bundled code includes two copies of pinia code, causing this issue.

@posva is there a way to prevent this?

[MikeyBeLike]

Just found out bundled code includes two copies of pinia code, causing this issue.

@posva is there a way to prevent this?

this was my issue too, if you're using vite you need to get vite to dedupe duplicate dependencies.

e.g

export default defineConfig({
  plugins: [vue()],
  resolve: {
    dedupe: ['pinia']
  },
})

it removes the other included pinia dependency and resolved this for me

[Luks3110]

I had to also add vue to the dedupe, it started to break with:

TypeError: Cannot read properties of null (reading 'isCE')

export default defineConfig({
  plugins: [vue()],
  resolve: {
    dedupe: ['pinia', 'vue']
  },
})