CODEWITHSUNDEEP
vue.jswebpackvuexnpm-linkvue-cli-3
Nathaniel Rink
Nathaniel Rink

Reputation: 513

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

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

  1. I made a vue-cli 3 project and got the “counter” example running (from https://github.com/vuejs/vuex/tree/dev/examples/counter)
  2. Works: When I move the store.js to an installed node_modules package (and update its import url) it continues to work.
  3. 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?

Upvotes: 2

Views: 998

Answers (2)

Hybrid web dev
Hybrid web dev

Reputation: 340

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

Upvotes: 0

Nathaniel Rink
Nathaniel Rink

Reputation: 513

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.

Upvotes: 1

Related Questions