Vue warning: Slot "default" invoked outside of the render function

[julie-ng]

I have a weird issue on a page with many nested contents. I've narrowed it down to the <MDC> component. I'm not using slots so I'm a bit confused about the warning. Can someone help me understand it?

I had the problem in 0.6.1 and it persists in 0.7.0

Error

via direct page load - ✅ no errors

If I just load this single page, i.e. refresh page or directly type URL in browser, it works fine.

via Vue Router, navigation - ⚠️ shows errors

If I arrive on this page from another page, it loads and renders fine. But there's Vue warnings below that my pedantic self wants to get rid of.

chunk-2435C5CU.js?v=8b856ecb:1513 [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. 
  at <ProseP > 
  at <AsyncComponentWrapper > 
  at <MDCRenderer key=0 tag="div" class=""  ... > 
  at <MDC value="Azure Network Policies" tag="div" > 
  at <List items= (3) ['Azure Network Policies', 'Calico', 'Cilium<sup>1</sup>'] isMarkdownList=true type="network_policies" > 
  at <Category category= {_path: '/networking/plugins/categories/compatibility', title: 'Compatibility', description: 'Can I use this plugin with…?', attributes: Array(5), body: {…}, …} columns= (4) [{…}, {…}, {…}, {…}] > 
  at <ContentQuery path="/networking/plugins/" find="one" > 
  at <ContentDoc> 
  at <Plugins onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/networking/plugins" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/networking/plugins', path: '/networking/plugins', query: {…}, hash: '', name: 'networking-plugins', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Cheatsheet ref=Ref< Proxy(Object) {…} > > 
  at <LayoutLoader key="cheatsheet" layoutProps= {ref: RefImpl} name="cheatsheet" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="cheatsheet" name="cheatsheet"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

p.s. I tried remove <sup> in my markdown. But the problem persisted so it's something with <MDC>

Template

If I remove <MDC> and just use {{ item }}, the warning goes away.

<template>
  <div class="content">
    <ul :data-list-type="listType">
      <li v-for="item in props.items" :key="item">
        <div v-if="props.isMarkdownList">
          <MDC :value="item" tag="div" />
        </div>
        <div v-else>
          {{ item }}
        </div>
      </li>
    </ul>
  </div>
</template>

What confuses me in the warning is this part

Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

I'm not using <slot> anywhere. In the page I am using <ContentDoc v-slot="{ doc }">. Is that part of the issue?

Any ideas?

[robsonsobral]

Same here. I tried to update MDC, but I can't because of #191

<template>
  <article
    v-if="Array.isArray(campaign?.goal_list) && campaign.goal_list.length"
    class="tab-list__item goals-page"
    role="tabpanel"
  >
    <section
      v-for="(goal, i) in campaign.goal_list"
      :key="i"
      role="region"
      class="tab-list text-body__tab-list goals-page__goal-item"
    >
      <h2 class="goals-page__goal-amount">
        {{ $n(goal.amount / 100, 'currency', { maximumFractionDigits: 0 }) }}
      </h2>
      <h3 class="goals-page__goal-title">
        {{ goal.title }}
      </h3>

      <MDC :value="goal.description" tag="div" class="goals-page__goal-description" />
    </section>
  </article>
</template>

[robsonsobral]

I don't understand why, but it can be fixed by adding a conditional.

<MDC v-if="goal.description" :value="goal.description" tag="div" class="goals-page__goal-description" />

[nethriis]

I have the same issue

[imlautaro]

I think it's related with passingan empty string to "value".

[Frallen]

For me, this happens in client mode, when switching between pages, there is a delay along with a warning, and then output. I use a simple MDC and ProsePre.

[aliniacob-form3]

Have the same issue. Any updates?

[apatiu]

This work for me

export default defineNuxtConfig({
  modules: ['@nuxtjs/mdc'],
  mdc: {
    components: {
      prose: false, // Disable predefined prose components     
    }
  }
})`

[adamdehaven]

When I’ve seen this previously, it’s when empty data is passed to the MDC component. Adding a v-if on or surrounding the component to ensure your content (likely reactive) is available before rendering the component should resolve the error.

[farnabaz]

Could you provide a simple reproduction?