<h3 dir="auto">Version</h3>
<p dir="auto">2.6.4</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://gist.github.com/DominusVilicus/f825d90575fccd6d437b02061c725a91">https://gist.github.com/DominusVilicus/f825d90575fccd6d437b02061c725a91</a> (code-sandbox doesn't allow <code class="notranslate">import()</code>)</p>
<h3 dir="auto">Steps to reproduce</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default {
  render(h){
    return h(import('./comp'))
  }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">{</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">h</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">h</span><span class="pl-kos">(</span><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./comp'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Results in an infinite loop that <strong>stops the browser tab from working</strong> (chrome). Just need to do <code class="notranslate">vue create app</code>, and create two components, and then use them in the <code class="notranslate">App.vue</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default {
  computed:{
    component(){
      return () =&gt; import('./comp')
    }
  },
  render(h){
    return h(this.component)
  }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">{</span>
  <span class="pl-c1">computed</span>:<span class="pl-kos">{</span>
    <span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./comp'</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">h</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-s1">h</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">component</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">works fine however</p>
<p dir="auto"><strong>comp.vue</strong></p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
    &lt;pre&gt;Hello World&lt;/pre&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">pre</span><span class="pl-kos">&gt;</span>Hello World<span class="pl-kos">&lt;/</span><span class="pl-ent">pre</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">Returning the <code class="notranslate">import</code>ed component in <code class="notranslate">h(import('./comp'))</code> should render the async component</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">It's going in an infinite loop (try put <code class="notranslate">console.log('test')</code> in <code class="notranslate">render()</code></p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">We have a Mobile build and a Web build, and we want to add a directive <code class="notranslate">mobile</code> or <code class="notranslate">web</code> to components/elements so that they only get included into the bundle if they are built with the respective flags / env.</p>
<p dir="auto">Currently we are doing this via a vue-cli plugin which executes <code class="notranslate">preprocess</code> on the template (using a custom loader). We tried using <code class="notranslate">directives</code> and <code class="notranslate">modules</code> in <code class="notranslate">compilerOptions</code> instead, as this seemed safer and more idiomatic, however we were unable to remove elements using any of the callbacks.</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">We tried returning <code class="notranslate">null</code> and <code class="notranslate">{}</code> and even <code class="notranslate">{ type: 3, text: "", isComment: true }</code> from <code class="notranslate">preTransformNode</code> (and <code class="notranslate">transformNode</code>), but it just resulted in various errors. We also tried changing <code class="notranslate">el.parent.children</code> which didn't yield any results.</p>
<p dir="auto">I think having the element just be removed when returning <code class="notranslate">null</code> from <code class="notranslate">preTransformNode</code> would be great, if that is possible.</p>