Version

3.0.4

Reproduction link

http://none

Steps to reproduce

In my application , frontend split into many parts and they deployed on different web server. So I use webpack5 ModuleFederationPlugin, but it does't work.I think it's a bug of vue. My code:

<template>
  <div class="hello">
    Child
    <h1>{{ msg }}  </h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

But if I change my code ,it works. My code:

<template>
  <div class="hello">
    <h1>{{ msg }}     Child </h1>
    <span>Child </span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

What is expected?

I hope text 'Child' shown in my page

  <div class="hello">
    Child
    <h1>{{ msg }}  </h1>
  </div>

What is actually happening?

console warning:

runtime-core.esm-bundler.js?daf0:38 [Vue warn]: Invalid VNode type: Symbol(Text) (symbol) 
  at <HelloWorld msg="aaaaa" > 
  at <App>

environments: @vue/cli 5.0.0-alpha.0 nodejs v15.3.0

This is caused by having more than one copy of vue included in the app (from the different /node_modules/ in the federated pojects).

You have to configure your way so that only one copy is included.

Since you provided no reproduction, we can't really be more specific.

This is caused by having more than one copy of vue included in the app (from the different /node_modules/ in the federated pojects).

You have to configure your way so that only one copy is included.

Since you provided no reproduction, we can't really be more specific.

I see, thank you. My solution:

 // index.html:
 <script src="https://cdn.jsdelivr.net/npm/vue@3.0.4"></script>

 // vue.config.js
  configureWebpack: config => {
     ...
    config.externals = { vue: 'Vue' }
    ...
  }

or

 new ModuleFederationPlugin({
     //...
        shared: {
          vue: {  singleton: true }
        }
    // ...
  })

Example of the same config for Vite (vite.config.js) if you are building a library and don't want to include external dependencies in your dist 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()],
  ...
});

This happened on windows, with vue's webpack.

Let's say you have two vue projects, and share components

...
project-a/src/components/Button.vue
project-a/src/views/Homepage.vue

...
project-b/src/components/Image.vue
project-a/src/views/ProductList.vue

You have a node modules in both projects. You import project-b's "Image.vue" in project-a's Homepage.vue

There is a small chance that project-a imports vue from project-b's node modules and project-a's node modules resulting in a duplicate vue.

You delete node modules from project-b and recompile project-a. The error no longer happens.