jsx-vue2 icon indicating copy to clipboard operation
jsx-vue2 copied to clipboard

this.$createElement is not a function

Open DM2489 opened this issue 4 years ago • 2 comments

Auto injection of h does not seem to work in Vuex actions where arrow functions are used.

Consider the following Vuex action (minimal example):

loadMyBookings() {
    return new Promise((resolve, reject) => {
        const success = false;
        if (!success) {
            Cwd.Vue.SideBars.Beta.addToMessageQueue({
                variant: 'danger',
                message: () => <p class="mb-0 mt-1">Failed to load.</p>,
                dismissibleTimeout: 30
            });
            reject();
        }
        else {
            resolve();
        }
    });
}

This gets transpiled to:

loadMyBookings: function loadMyBookings() {
    var h = this.$createElement;
    return new Promise(function (resolve, reject) {
        var success = false;

        if (!success) {
            Cwd.Vue.SideBars.Beta.addToMessageQueue({
            variant: 'danger',
            message: function message() {
                return h("p", {
                "class": "mb-0 mt-1"
                }, ["Failed to load."]);
            },
            dismissibleTimeout: 30
            });
            reject();
        } else {
            resolve();
        }
    });
}

It looks like h is getting auto injected with the value of this.$createElement. Because the Vuex action is not called from a render function in this case, there is no concept of this.$createElement, and it logs a console error h is not a function.

Maybe a check should be put in place to test whether this.$createElement is undefined? If it is, then fall back to the value of this._vm.$createElement?

DM2489 avatar Dec 16 '19 11:12 DM2489