Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to use Vuex + namespace with Typescript

See original GitHub issue


I am doing the following in typescript

Vue.customElement('coupon-preview', new CouponPreview({ store }).$options);

But I am getting the following error because the store is not present in the new component:

Cannot read property '_modulesNamespaceMap' of undefined"

If I instead do

Vue.customElement('coupon-preview', new CouponPreview({ store }));

The store is there but the component fails to render:

template or render function not defined

Anything I can do to include the store in typescript?

I also tried the suggestion here but no dice

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

eni9889commented, Mar 24, 2020

@karol-f that does not work either. The only way I got this to work was by manually setting this.$store = store in beforeCreate of the component which is less than ideal

cah-keyan-hardmancommented, Dec 8, 2020

If anyone stumbles upon this thread I found an extremely simple solution to this issue. This works for issues with VueX store as well as Vue Router.

When defining your parent component you can do the following -

@Component({ store, router })
export default class App extends Vue {}

In your main.ts -

//vue-custom-element & IE11 polyfill
import VueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';
Vue.customElement('your-new-tag', (new App().$options));

You will then be able to access your vuex-class namespaces.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Referencing a Vuex Store Module gives namespace error for ...
In VuejS - Typescript in order to have these attributes needed your module needs to import and define them. I am utilizing only...
Read more >
TypeScript Support - Vuex
Vuex provides its typings so you can use TypeScript to write a store definition. You don't need any special TypeScript configuration for Vuex....
Read more >
Discussion of Vuex + TypeScript - DEV Community ‍ ‍
The code works but typescript is unable to resolve the getters properly. ... But if you are using TS 4.1 you can use...
Read more >
How To Manage State in a Vue.js Application with Vuex
I work on TypeScript apps with Vue.js. Currently a Senior Front-End Engineer at Enodo, based in Chicago. Still looking for an answer?
Read more >
How to set up and code Nuxt.js apps fully in TypeScript
Since you're using namespaced Vuex modules, first import namespace from nuxt-property-decorator and then pass the name of the module to get ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found