Vue 3 Invalid VNode type

Question

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.

[Vue warn]: Invalid VNode type: Symbol("Fragment") (symbol) at

I can't tell exactly what is causing the error, but I feel like it has something to do with <slot />. 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 "packers" just in case (Rollup, Webpack, Parcel), with different setting variations for each one, but nothing changes. Is there some concept I am missing?

For some context, here is a summarized version of the component file from my library:

<template>
    <div class="field">
        <label class="label">{{ label }}</label>
        <slot />
    </div>
</template>

<script>
export default {
    name: "b-field",
    props: {
        label: String
    }
};
</script>

It is being used like this in my app, where <b-input /> is another component.

<b-field>
   <b-input />
</b-field>

This has really stumped me. Any help, or at least tips to point me in the right direction, is welcome.

score 16 · Accepted Answer · answered Jul 13 '21 at 11:41

Turns out this error is caused because Vue is being loaded twice. Once from the main project and once from the project being imported via npm link (or a locally installed dependency).

If you used the vue-cli you can configure the vue.config.js file of the parent project to make it work with the local dependency by adding the following:

const path = require(`path`);

module.exports = {
    configureWebpack: {
        resolve: {
            symlinks: false,
            alias: {
                vue: path.resolve(`./node_modules/vue`)
            }
        }
    }
};

I import a different vue based on the build. This would not work for me until I did it this way: '^vue$': path.resolve('./node_modules/vue') +(devMode ? '/dist/vue.esm.js' : '/dist/vue.min.js'), 'vue$': path.resolve('./node_modules/vue/dist/vue.runtime.esm-bundler.js'), — Dirigible, Jun 08 '22 at 01:34

score 2 · Answer 2 · edited Jul 15 '21 at 14:36

2

Awesome answer: https://stackoverflow.com/a/68361722/16453703

I change my webpack.common.js setting like this:

  resolve: {
    extensions: ['\*', '.js', '.jsx', '.vue'], 
    symlinks: false,
    alias: {
        "@": path.resolve(__dirname, '../src'),
        'vue$': 'vue/dist/vue.esm-bundler.js',
        vue: path.resolve(__dirname, `../node_modules/vue`)
    },
},

edited Jul 15 '21 at 14:36

General Grievance

4,555
31
31
45

answered Jul 15 '21 at 08:49

AlanChen

21
2

score 1 · Answer 3 · answered Jul 08 '21 at 01:47

As it turns out, how the library is being accessed matters. For test proposes, I was using npm link as a method of accessing the package from my project. However, that was causing some kind of dependency glitch (IDK). After a quick npm publish on the library and npm install on the project, everything works great.

score 0 · Answer 4 · answered Mar 17 '23 at 05:39

Example config extract for Vite (vite.config.js) if you are building a library and don't want to include external dependencies in your dist build code:

import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "package-name",
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: { vue: "Vue"}
      }
    }
  },
  plugins: [vue()],
  ...
});

Vue 3 Invalid VNode type

4 Answers4

Linked