Invalid VNode type when loading remote Vue3 components

[chen2073]

I have a host component(Vue3 based) and a remote component(Vue3 based) and my remote component does some data fetching with Pinia as my state management library and renders the data. Remote component itself can renders the data perfectly but when I add it in the host component, the DOM doesn't show anything and instead it gives me a warning: Invalid VNode type: Symbol() (symbol). I tried googling it and it says somehow Vue has been loaded twice in the browser. If that's the case, what should I do?

Here is a quick snippet of my Vite configuration for remote component:

federation({
      name: 'remote1',
      filename: 'remoteEntry.js',
      exposes: {
        './APP': './src/App.vue',
        './USERS': './src/components/People.vue',
    },
      shared: ['vue', 'pinia']
    }),

Host component vite config

federation({
    name: 'host',
    remotes: {
      remote1: "http://localhost:5001/assets/remoteEntry.js",
    },
    shared: ['vue', 'pinia']
  }),
],

[alekswebnet]

@chen2073 You can try to run your host application with build --watch and preview in parallel, using npm-run-all:
"scripts": { "start": "run-p build-watch preview", "dev": "vite", "preview": "vite preview", "build-watch": "vite build --watch" },