Remote added at runtime doesn't works as expected

[Meriemi-git]

Versions

• vite-plugin-federation: 1.3.9
• vite: 4.0.5

Step to reproduce

Clone the repo, go to packages/examples/vue3-demo-esm. In the Layout host project edit the main.js and remove code related to dynamic remote to only use dynamic components on runtime inside Layout.vue

__federation_method_setRemote('dynamic', {
  url: () => Promise.resolve('http://localhost:5004/assets/remoteEntry.js'),
  format: 'esm',
  from: 'vite'
})
const dynamicComponents = ['Content', 'Button', 'Images']
const res = []
for await (let value of dynamicComponents) {
  const moduleWraped = await __federation_method_getRemote(
    'dynamic',
    `./${value}`
  )
  res.push({
    name: `dynamic-${value.toLowerCase()}`,
    component: __federation_method_unwrapDefault(moduleWraped)
  })
}
res.map((item) => app.component(item.name, item.component))

Build and run the example

What is Expected?

Dynamic button rendered inside mounted() of Layout.vue is displayed after adding 'dynamic' remote an unwraping ./Button component to render it inside the this.$refs.container.

What is actually happening?

Button is never rendered

Workaround

You need to await the moduleWraped.__tla Promise to render the component properly.

  __federation_method_setRemote('dynamic', {
      url: () => Promise.resolve('http://localhost:5004/assets/remoteEntry.js'),
      format: 'esm',
      from: 'vite'
    })
    __federation_method_getRemote('dynamic', './Button')
    .then(async (moduleWraped) => {
      await moduleWraped.__tla
      return moduleWraped
    })
    .then((moduleWraped) => __federation_method_unwrapDefault(moduleWraped))
    .then((module) => {
      render(h(module, {}), this.$refs.container)
    })