Search code examples
vue.jswebpackvuexnpm-linkvue-cli-3

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?


Solution

  • 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.