Version

3.2.20

Reproduction link

codepen.io

Steps to reproduce

1、write a component A with vue3 in projectVue3; for example, raw code

//componentA.vue
<div>
    <span>my outer component</span>
    <hello-world></hello-world>
</div>
//hello-world.vue
<div>hello world</div>

2、use webpack module federation to expose the A component;

3、use A component in projectVue2;

// methods
async fetchImport() {
  return new Promise(async(resolve, reject) => {
    try {
      const res = (await import('ProjName/componentA')).default;
      resolve(res);
    } catch (err){
      reject(err);
    }
  })
};

//mounted call
fetchImport()
  .then(res => {
    const app = createApp(res);
    app.mount('#asyncApp');
  });

What is expected?

Components are resolved recursively expected dom tree

<div>
    <span>my outer component</span>
    <div>hello world</div>
</div>

What is actually happening?

Only the outermost component is parsed, and the sub-components are not parsed correctly，which results in a dom node like this

<div>
  <span>my outer component</span>
  <hello-world></hello-world>
</div>

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

Closing because there is no repro.

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

Closing because there is no repro.

Hi, thanks for your reply. But i have tried to debug into the vue3 source code, and found the child components are not treated as vnodes but as normal dom nodes. And i think it's a bug of vue3. Hope to get your advice.

@lifeilu see https://v3.vuejs.org/guide/migration/async-components.html#introduction

@lifeilu see https://v3.vuejs.org/guide/migration/async-components.html#introduction

Hi, thanks a lot for your reply. I have tried the defineAsyncComponent function of vue3, and the results are the same.

  const ComponentA= defineAsyncComponent(
      () => import('ProjName/componentA')
  );
  const app = createApp({
      name: 'vue3root',
      render() {
        return h('div',{},[h(ComponentA)])
      }
  });

and I found a similar question in StackOverflow, vue-module-federation-child-components, The child components not rendered. Is it a bug? Hope to get your advice.

The child components not rendered. Is it a bug? Hope to get your advice.

I think this is not a vue-core bug. maybe relate to module-federation.

The child components not rendered. Is it a bug? Hope to get your advice.

I think this is not a vue-core bug. maybe relate to module-federation.

I have tried vue2 component use module-federation, it works well. And i have tried to change the child components using defineAsyncComponent, and found that the chunks of child components were not loaded. I think this is caused by the incompatibility between webpack and vue3, but I'm not sure how to fix it. Hope to get your advice.

ping @posva @LinusBorg

OP can open a new issue when they have a runnable reproduction demonstrating the problem.

OP can open a new issue when they have a runnable reproduction demonstrating the problem. I have created a repo(https://github.com/lifeilu/vue-mf-demo.git), which can demonstrate the problem of child components not rendered. Hope to get your advice.