Using vuex store with npm-link in vue-cli 3 project loses $store

Question

I think this is a config issue related to keeping store in an npm-linked folder.

I made a vue-cli 3 project and got the “counter” example running (from https://github.com/vuejs/vuex/tree/dev/examples/counter)
Works: When I move the store.js to an installed node_modules package (and update its import url) it continues to work.
Breaks: When I move the store.js to an npm linked node_modules package it compiles and dev tools finds the store, but I get a blank screen and console error: Property or method “$store” is not defined on the instance but referenced during render

It also works properly with a linked package if I build the minimized js (npm run build). Is there a config setting I'm missing?

I can't reproduce the problem (the demo worked the same regardless of whether the store was npm-linked). Do you have a GitHub link to a project that exhibits the issue? — tony19
– tony19, Commented Aug 28, 2018 at 16:50

Nathaniel Rink · Accepted Answer · 2018-08-28 20:06:35Z

1

The problem turned out to be that the linked packages had its own node_modules folder. I think that may have resulted in webpack creating 2 instances of Vue and attaching the linked package to the 2nd instance.

Deleting the depended upon package's node modules and letting webpack / vue-cli run at the root level resolved my problem.

answered Aug 28, 2018 at 20:06

Nathaniel Rink

5236 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amoe Over a year ago

This also worked for me. I think this could be a bug, although I'd have no idea what package would be responsible for such a bug.

ricosrealm Over a year ago

This isn't ideal... if you need to actively develop and build the linked module, not having node_modules folder would be a problem.

Hybrid web dev · Accepted Answer · 2022-02-04 14:54:57Z

0

I realize this question is ridiculously old, but I ran into this exact issue. As deleting node_modules isn't a valid solution, here's what actually worked.

In the library you're importing into your main app, edit your package.json file. You want to move Vue to be a peer dependency.

"dependencies": {
    "vue": "^3.0.0" // move this
},

Move "vue" here.

"peerDependents": {
    "vue": "^3.0.0"
},

This will cause your library to use the instance of Vue utilized by your main vue app. As the accepted answer states, this issue is indeed caused by each package loading its own Vue instance. The issue happens because reactivity is bound to the Vue instance. As each library gets its own instance, this creates a situation where reactivity isn't properly tracked between the instances.

I found the solution to this in the Vuejs git repo at https://github.com/vuejs/vue-cli/issues/4271

answered Feb 4, 2022 at 14:54

Hybrid web dev

3384 silver badges15 bronze badges

2 Comments

Nathaniel Rink Over a year ago

Thank you for the response. I will try to get my vue code open soon and test this so I can accept it--as if it works it's better than my solution

Hybrid web dev Over a year ago

It was your answer that pointed me in the right direction.

Collectives™ on Stack Overflow

Using vuex store with npm-link in vue-cli 3 project loses $store

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related