Vue causes browser to become unresponsive when createElement is called with Promise-returning function

[DanielRosenwasser]

Version

2.4.2

Reproduction link

https://jsfiddle.net/2pbthd1v/

Steps to reproduce

When calling createElement, pass a function that returns a promise which resolves to a Vue options bag.

For example:

<div id="app">
  <p>{{ message }}</p>
</div>

var options = {
  template: '<div id="replacement">Hello!!</div>',
}

new Vue({
  el: "#app",
  render(h) {
    return h(() => new Promise(r => r(options)));
  }
});

What is expected?

Either something useful or an error message.

What is actually happening?

The entire page stops responding.

---

This was part of the .d.ts test suite. I wanted to see if a test case was legitimate, but I ended up finding that it triggers some sort of bad behavior.

[HerringtonDarkholme]

Thanks! This is a valid bug. It freezes browsers and node.

[posva]

I don't think it is a bug, createElement isn't meant to work with Promises, right?

[HerringtonDarkholme]

It doesn't matter if we need to accept Promise as API. We should not freeze browser or node server when users give Vue wrong input.

[posva]

Oh, yeah I agree with that, it should be fixed if possible, it's unreasonable to freeze the platform 😆 . The reason I'm saying it's not a bug is because from my perspective a bug is a situation not working while it should

edit: I misread the code! Got tricked by the syntax, I thought the promise was using the call of h not the other way around 😵

[HerringtonDarkholme]

Preliminary investigation shows Vue relies on the function as context to resolve async component.

In this case, render function will always return a new function instance so the handle Vue attaches to the async component function is lost. So Vue will think the component isn't properly resolved.

The fix is simple, move the inline arrow function outside, with a stable identifier var asyncComp = () => Promise.resolve(option) will fix this. Because Vue can find the context it previously attaches to the function.

I guess really no one is using this API. Also the solution to fix it isn't clear to me :/

[yyx990803]

Exactly what @HerringtonDarkholme said - when the Promise resolves, it will cause the current component to re-render, resulting in a new async factory function, thus entering an infinite update loop.

I also don't see a simple fix to this, but this is not supported usage anyway. I guess what we can do is documenting this behavior in the async component section?

[blocka]

Is there a workaround? I have a use case where I want to dynamically load a component based on data that is loaded, but I don't want to have to specify each component outright.

Something like:

return h(() => resolveComponent(this.data))

[mandaputtra]

Can it be documented or maybe log some error when its happen?

[and3k5]

I just fixed a similar case. My website started freezing while using AsyncComponent with Vue 2.7.
I fixed my problem by changing this

new Vue({
    render: function (h) {
        return h(() => import("./my-component.vue"));
    }
}).$mount(selector);

into this

const myComponent = import("./my-component.vue");
new Vue({
    render: function (h) {
        return h(myComponent);
    }
}).$mount(selector);

It seems like storing the component in a variable is enough to avoid the render loop.