Vuex: $store not injected in child component when component is imported from an npm link

[DanielLavoie90]

Version

2.3.0

Reproduction link

Can't provide one since it's a link between 2 different projects.

Steps to reproduce

I have a repository that have some "shared" components that i'll need to use in 3 other separate projects so what I did is set a this repo with npm link.
Then I did a index.js where I export a function that set all my component with vue (Plugin) like this:

function CommonComponents(Vue) {
        Vue.component('login', require('./components/common/auth/login.vue'));
        Vue.component('register', require('./components/common/auth/register.vue'));
  ...
}

export {
    CommonComponents
}

PS: It's this way because I export other stuff.

Then, in my other projects, I call :

import { CommonComponents } from 'my-npm-module';
Vue.use(CommonComponents);

...

import {sync} from 'vuex-router-sync';
import store from './store/index.js';
import Router from './router/index.js';

sync(store, Router);

const app = new Vue({
    router: Router,
    store,
}).$mount('#app');

But, doing so, I have $store and $router only on the root component but not in any of my children.
I also tried setting the components directly in my projects with:
Vue.component('login', require('my-npm-module/src/components/common/auth/login.vue'));
But exactly the same problem occur.
All was working fine before I split my projects into a shared and 3 other sub-projects.

The errors I have in my console are:
Cannot read property 'getters' of undefined"
Cannot read property 'dispatch' of undefined"

What is expected?

$store and $router in child component

What is actually happening?

only present in root

[ktsn]

Could you provide a minimal reproduction by using github repository?
I'm not sure why you cannot provide repro in that case.

[DanielLavoie90]

https://github.com/itsgonnabesick/vuex-shared-project
https://github.com/itsgonnabesick/vuex-shared-resources

1) clone both repo
2) npm link (in resources)
3) npm link vuex-shared-resources (in project)
4) npm run dev in project

[ktsn]

@itsgonnabesick
This is because you are loading different Vue constructor - one is under vuex-shared-project, another is under vuex-shared-resources.
You need to specify modules option of webpack config to ensure to use vuex-shared-project deps.

resolve: {
  // ...
  modules: [
    path.resolve(__dirname, '../node_modules')
  ],
  // ...
}

FYI: https://github.com/webpack/webpack/issues/811

[DanielLavoie90]

OMG... Thank You SOOO much... I passed 3 days on this exact problem and never tough 1 second it would have to do with npm link.

[mnooblet]

thanks... I've also wasted a few hours now because it doesn't work with npm link... this fixed it

[nrink-celect]

I have the same problem using vue-cli 3, I've added what I think you're saying is the fix to vue.config but get the same error:

`const path = require('path');

module.exports = {
css: {
sourceMap: true,
},
configureWebpack: {
resolve: {
modules: [
path.resolve(__dirname, '../node_modules'),
],
},
},
lintOnSave: true,
};
`

[nrink-celect]

I have the same problem using vue-cli 3, I've added what I think you're saying is the fix to vue.config but get the same error:

[nrink-celect]

I have the same problem using vue-cli 3, I've added what I think you're saying is the fix to vue.config but get the same error:

`const path = require('path');

module.exports = {
css: {
sourceMap: true,
},
configureWebpack: {
resolve: {
modules: [
path.resolve(__dirname, '../node_modules'),
],
},
},
lintOnSave: true,
};

`