this.$store is undefined after migration to wepback5

[sirSayed98]

While transitioning to webpack 5, I've encountered an issue where the store becomes undefined. I've investigated the $ngVueProvider.setRootVueInstanceProps({ store }) function, which is responsible for enabling Vuex in all Vue components. However, upon examining its implementation, I haven't discovered any connections to webpack.

Should I implement any extra configurations to address this issue?

[jaredmcateer]

There shouldn't be but I haven't personally tested it. Would it be possible to create a minimal reproduction? I can take a look at it this weekend.

[sirSayed98]

you can find here when I use setRootVueInstanceProps no $store value existed (you can check log in team-performance component)
So I need to put store explicitly using
Vue.component('performancePageComponent', { store, render(h) { return h(PerformancePageComponent); }, })
you can check this workaround here

[jaredmcateer]

@sirSayed98 I checked out your repository and changed the branch to POC/setRootVueInstanceProps, I started the server and When I click on "Team performance chart page" I see the PerformancePage component successfully call this.$store.dispatch('getCharts') on creation and I see getCharts attempt to make an external request. So it looks like ngVue is working as expected in that branch.

[sirSayed98]

I appreciate your prompt reply. Initially, I believed that I had raised the issue on this repository. However, as you've observed, it seems to have disappeared. The challenge persists within our project. Regrettably, it's located in a private repository. If we could arrange a meeting to delve into the matter further and examine it within our product, I would be extremely thankful.
@jaredmcateer
Note:
in the screenshot there is no $store attribute in vue component

[jaredmcateer]

I'm on vacation this week and only had a few minutes to play around. We can try and set something up next week if you can't figure it out by then. Some ideas that you can check

• Update ngVue, I notice you're using an older version of ngVue since it's warning about event names so I'm not sure which version your running but that warning was removed in the most recent patch. Prior to that patch there were a series of releases to fix ESM support, maybe webpack 5 is having issues with that.
• Check your angular module config that the ngProvider code is being run on the correct module. If you happen to have different modules and the store isn't being provided at the top most module it might not be available in the components.
• Based on the "You're running in development mode" console messages it looks like multiple versions of Vue are being included in your app (vue.runtime.esm.js and vue.runtime.common.dev.js bundles). That could cause a problem

[sirSayed98]

Thank you 🙏 have a nice vacation 🔥
I will double check all these notes and Ping you next week if the problem not solved

[eeedvisss]

Thank you 🙏 have a nice vacation 🔥 I will double check all these notes and Ping you next week if the problem not solved

Hi @sirSayed98. Have you solved the issue in your project? We stumbled on the same issue. Maybe you could share what was the problem in your case?

[sirSayed98]

Thank you 🙏 have a nice vacation 🔥 I will double check all these notes and Ping you next week if the problem not solved

Hi @sirSayed98. Have you solved the issue in your project? We stumbled on the same issue. Maybe you could share what was the problem in your case?

still not solved