title: Vue 3 Invalid VNode type
body: <p>I've recently been working on my own component library for Vue 3. When I import it into my main project for use, I get this error in the browser.</p>
  <pre><code>[Vue warn]: Invalid VNode type: Symbol(&quot;Fragment&quot;) (symbol) at
  </code></pre>
  <p>I can't tell exactly what is causing the error, but I feel like it has something to do with <code>&lt;slot /&gt;</code>. I read that it could be caused by having two Vue instances, but if that is the case it is really hard to remove one them. I've tried using different &quot;packers&quot; just in case (Rollup, Webpack, Parcel), with different setting variations for each one, but nothing changes. Is there some concept I am missing?</p>
  <p>For some context, here is a summarized version of the component file from my library:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;field&quot;&gt;
          &lt;label class=&quot;label&quot;&gt;{{ label }}&lt;/label&gt;
          &lt;slot /&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: &quot;b-field&quot;,
      props: {
          label: String
      }
  };
  &lt;/script&gt;
  </code></pre>
  <p>It is being used like this in my app, where <code>&lt;b-input /&gt;</code> is another component.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;b-field&gt;
     &lt;b-input /&gt;
  &lt;/b-field&gt;
  </code></pre>
  <p>This has really stumped me. Any help, or at least tips to point me in the right direction, is welcome.</p>