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.

Answer 1

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`)
            }
        }
    }
};

Answer 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`)
    },
},

Answer 3

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.