jsx-vue2
jsx-vue2 copied to clipboard
this.$createElement is not a function
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
?