vue: bug: infinite loop async component crashes browser tab

Version

2.6.4

Reproduction link

https://gist.github.com/DominusVilicus/f825d90575fccd6d437b02061c725a91 (code-sandbox doesn’t allow import())

Steps to reproduce

export default {
  render(h){
    return h(import('./comp'))
  }
}

Results in an infinite loop that stops the browser tab from working (chrome). Just need to do vue create app, and create two components, and then use them in the App.vue

export default {
  computed:{
    component(){
      return () => import('./comp')
    }
  },
  render(h){
    return h(this.component)
  }
}

works fine however

comp.vue

<template>
    <pre>Hello World</pre>
</template>

What is expected?

Returning the imported component in h(import('./comp')) should render the async component

What is actually happening?

It’s going in an infinite loop (try put console.log('test') in render()

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

I already told you that we need a variable in my first comment. I would appreciate if you stop spamming, it’s not the first time you do this and it’s not particularly nice.

If you want to, you can instead try to help improve the documentation page for render functions.

What you can do is this:

export default {
  data: () => ({ comp: 'comp' }),
	computed: {
    component(){
		const comp = this.comp
        return () => import('./blocks/' + comp) 
    },
}
    render(h) {
        return h(this.component);
    }
}

and this is the way you do with no modules:

var Comp = () => Promise.resolve({ template: `<div>Comp</div>` })

new Vue({
  el: '#app',
  data: {
    foo: 'bar'
  },
  render: h => h(Comp)
})

posva on May 13, 2019

Thanks! Yeah, the doc page for render functions is probably the one that needs the most care among all pages in vuejs docs. It’s also a quite advanced topic so not everybody can contribute to that section, but since you have been experimenting so much with render functions, you should for sure be able to improve that page.

When using a variable like const Component = () => ..., Vue stores a resolved property in it Component.resolved === true (after resolving the promise)

posva on May 14, 2019