"Non-function value encountered for default slot." in Vue 3 Composition API component

Question

MCVE

https://github.com/hyperbotauthor/minvue3cliapp

MCVE live

https://codesandbox.io/s/white-browser-fl7ji

I have a Vue 3 cli-service app, that uses composition API components with slots.

The HelloWorld component renders the slots it receives in a div:

// src/components/Helloworld.js
import { defineComponent, h } from "vue";

export default defineComponent({
  setup(props, { slots }) {
    return () => h("div", {}, slots);
  }
});

The Composite component uses HelloWorld in its setup function and fills in its slots:

// src/components/Composite.js
import { defineComponent, h } from "vue";

import HelloWorld from "./HelloWorld";

export default defineComponent({
  setup(props, { slots }) {
    return () =>
      h(HelloWorld, {}, [h("div", {}, ["Div 1"]), h("div", {}, ["Div 2"])]);
  }
});

The app uses both ways to render the same two divs:

<template>
  <!--<img alt="Vue logo" src="./assets/logo.png">-->
  Works with plain slots
  <HelloWorld>
    <div>Div 1</div>
    <div>Div 2</div>
  </HelloWorld>
  Triggers warning when slots are used from other component
  <Composite> </Composite>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import Composite from "./components/Composite";

export default {
  name: "App",
  components: {
    HelloWorld,
    Composite,
  },
};
</script>

<style>
</style>

The Composite component triggers this warning:

Non-function value encountered for default slot. Prefer function slots for better performance. 

The same warning is not triggered when I use HelloWorld from only the template.

I don't understand what is the difference if I use the slots from a template or from an other component.

What is the point of this warning?

Is there any way I can remove this warning?

Answer 1

The warning is about the array of VNodes created in the setup()'s render function in Composite.js.

// src/components/Composite.js
export default defineComponent({
  setup(props, { slots }) {
    return () =>
      h(HelloWorld, {}, [h("div", {}, ["Div 1"]), h("div", {}, ["Div 2"])]);
                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  }
});

This is inefficient because the child slot is rendered before the HelloWorld component could even use it. The child slot is essentially rendered in the parent, and then passed to the child. Wrapping the child slot generation in a function defers the work until the child is rendered.

I don't understand what is the difference if I use the slots from a template or from an other component.

@vue/compiler-sfc compiles the <template> from SFCs into a render function, where slots are passed as functions, which avoids the warning you observed.

Solution

Instead of rendering the child slot in the parent (i.e., passing an array of VNodes as the slots argument directly), wrap it in a function:

// src/components/Composite.js
export default defineComponent({
  setup(props, { slots }) {
    return () =>          👇
      h(HelloWorld, {}, () => [h("div", {}, ["Div 1"]), h("div", {}, ["Div 2"])]);
  }
});

Note the inner h() calls don't need this function wrapper because they're all rendered together with the default slot by the child.

demo