Reactivity and multiple root nodes are not working for a remote component

[koyadume]

Describe the bug

I have a vuejs 3 application (main-app) which is consuming a component from a lib project (micro-app) hosted on a remote location. I have defined a plugin as part of lib project which registers its components with vuejs 3 host application. While consuming components from lib project in the host application I am facing following issues -

• Remote component ( App1Home.vue ) renders fine if it is having only one root component. But if I add more than one root component, it stops rendering without showing any error in the console logs or anywhere else.
• Remote component ( App1Home.vue ) has a onMounted() hook defined but same is not being triggered.

Host application - https://github.com/koyadume/main-app
Remote lib project - https://github.com/koyadume/micro-app

I had this working successfully with webpack 4 and so it seems this is an issue with vite.

Reproduction

https://github.com/koyadume/main-app

Steps to reproduce

• Clone following repos -

https://github.com/koyadume/main-app
https://github.com/koyadume/micro-app

• Execute following commands from the root folders of both the repos -

yarn install

yarn build

yarn preview

• Above command will run host application (main-app) on 8090 port while lib project (micro-app) will run on 8091 port. Lib project will be accessible over 8090 port through the proxy defined in host application.

• Open a browser and access http://localhost:8090 url.

• On the home page you will see Micro App printed in the last line but it should ideally be Micro App (updated) if onMounted() hook was fired successfully.

• Uncomment below line in App1Home.vue of micro-app project and you will see that no content from App1Home.vue will be printed on the home page.

<!-- <p>I'm a micro app which contains remote components.</p> -->

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i5-10310U CPU @ 1.70GHz
    Memory: 2.74 GB / 15.61 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE      
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD        
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.63)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[koyadume]

Did further investigation, converted App1Home.vue to options api and it started working. So it seems to be an issue with composition API -

<template>
   <div>
      <h3 style="margin-top: 1rem;">{{ msg }}</h3>

      <button @click="flag = !flag" >Update</button>
   </div>
</template>


<script>
   export default {
      data() {
         return {
            msg: 'Micro App',
            flag: false
         }
      },
      mounted() {
         console.log('Triggering mounted ..')
         this.msg = 'Micro App (updated)'
      },
      watch: {
         flag() {
             console.log('Triggering watch ..')
            this.msg = 'Micro App (updated by watch)'
         }
      }
   }
</script>

However multiple root nodes are not working with options API too. So updating <template> block to following does not work -

 <template>

   <h3 style="margin-top: 1rem;">{{ msg }}</h3>

   <button @click="flag = !flag" >Update</button>

</template>

[sapphi-red]

This is because you have two Vue instances in your app.

Changing vite.config.js in your micro-app to:

import { resolve } from "path";
import { defineConfig } from "vite";

import vue from '@vitejs/plugin-vue'
import replace from '@rollup/plugin-replace'
import virtual from "@rollup/plugin-virtual";

export default defineConfig({
   build: {
      lib: {
         entry: resolve(__dirname, "src/index.js"),
         name: "MicroAppVueComponents",
         fileName: "vue-components",
         formats: ['es']
      },
      rollupOptions: {
         // make sure to externalize deps that shouldn't be bundled
         // into your library
         plugins: [
            replace({
               'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
               preventAssignment: true
            }),
         ]
      }
   },
   plugins: [
      vue(),
      {
         ...virtual({
            'vue': `
               export const ref = Vue.ref
               export const onMounted = Vue.onMounted
               export const openBlock = Vue.openBlock
               export const createElementBlock = Vue.createElementBlock
               export const toDisplayString = Vue.toDisplayString
            `
         }),
         enforce: 'pre'
      }
   ],
   resolve: {
      alias: {
         "@": resolve(__dirname, "./src"),
      },
   },
   preview: {
      // port: 8091
   }
});

Then, adding the following code at the top of main.js in your main-app:

import { ref, onMounted, openBlock, createElementBlock, toDisplayString } from 'vue'
window.Vue = { ref, onMounted, openBlock, createElementBlock, toDisplayString }

worked.

Closing as this is not a bug in Vite.

[koyadume]

Thanks @sapphi-red, It is working now.

However I had to add few more lines to vite.config.js in order to solve the issue of multiple root nodes in the remote component -

export const createElementVNode = Vue.createElementVNode
export const Fragment = Vue.Fragment