Importing and displaying component from another local project in vue 3

Question

I'm trying to create a library (vue3-lib) with vue3 and typescript based on primevue, that will be used in some other projects (like vue3-project). When running the vue3-lib everything works as expected, but when I'm running (npm run serve) the vue3-project I can't display the imported component from vue3-lib (I'm getting "[Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol)" when accessing the Prime Test view). I'm just starting vue3 and the whole ecosystem, so any advice would help. Thanks!

Github: https://github.com/aitudor/vue3-lib https://github.com/aitudor/vue3-project

Kalle

It is likely that the issue stems from two separate instances of the vue package being used to start your application and one of its dependencies. Vue 3 uses Symbols for some rendering work and although they look the same (i.e. upon debugging, Symbol(Fragment) seems to be evaluated against Symbol(Fragment) which one could expect to match), they are not when they come from two different scripts. I’m facing the same issue as you and I don’t have a solution, unfortunately. – Remontant

Have you resolved this issue? Facing the same error and have no clue. :( – Orlan

I haven't found a solution for this issue. What I did was to use git submodule and add the vue3-lib as a git submodule in vue3-project. This of course has some drawbacks, but this is where I am at. When I'll have more time, I'll try to figure out WHY this doesn't work. Thanks to all that responded. – Kalle

I still don't know why this issue happens. I did find that building the component library using render() functions as opposed to using <template> for the markup seems to make things work fine again. – Lessen

Did someone solves this issue? – Forefather

Answer 1

// main.js
import * as vue from "vue";
window.Vue = vue;

Martineau

Hi, welcome to SO. Please refrain from code-only answers. In this case, you might explain why the OP received the error and how this solves it. – Lejeune