vue icon indicating copy to clipboard operation
vue copied to clipboard

Module Federation & Vue 2 SSR: support async initialization

Open tameraydin opened this issue 2 years ago • 0 comments

What problem does this feature solve?

In order for Module Federation to work correctly, it requires a bootstrap entry file that serves as an asynchronous boundary between the host and the remote code. This way It will split out the initialization code of a larger chunk to avoid any additional round trips and improve performance in general. (Read more in: the issue in module-federation, webpack documentation and a blog post).

When we try this concept in Vue 2 (latest version, 2.6.14), during SSR, vue-server-renderer will complain as it expects the module export to be a function, regardless of whether it will run it in a new context or not (runInNewContext).

See below commit (over the vue-hackernews example project) where the issue is minimally reproduced: The server entry will simply export the function creating the app instance through an import, instead of exporting it directly: https://github.com/tameraydin/vue-hackernews-2.0/commit/074192d9da26f8d78c742acb4328468edb19806c

What does the proposed API look like?

There would be no need to introduce any new API or a breaking change. We would like vue-server-renderer to support also such async initializations; in other words, to accept also Promise (e.g. import) type of exports which would then resolve to a function that it currently expects, so that the Module Federation & SSR can be fully achieved in Vue 2.

We have solved this in our local fork (through a small refactoring over createBundleRunner) with proper testing and are happy to open a pull-request - but of course, we would like get your feedback first.

PS. I created a draft PR in case it provides a better context.

tameraydin avatar Mar 31 '22 10:03 tameraydin