distributed-vue-applications-loading-components-via-http | example project for the following article | Architecture library

I set up a repository for 3rd parties to create plugins in our website. Essentially, I based our repo off of Markus Oberlehner's guide here: https://github.com/maoberlehner/distributed-vue-applications-loading-components-via-http.

I only included the files and folders necessary for compiling vue components into js files. I did not include any of his code that is dedicated to including these external js files in another project.

A user can easily compile a vue component into a js file with the following command.

I am designing an architecture for the Vue 3 app with distributed module-based ownership. Module system will be represented with plugins (seems like the most appropriate solution allowing vuex module and vue-router dynamic injects). Each such module/plugin will be developed by dedicated team working within isolated repos. We cannot use npm package-per-plugin approach as deployment process should be isolated as well, and with npm approach core app team will have to rebuild app each time npm package plugin has updates. This means we will have to load such plugins/pages at runtime via http.

So far this approach by Markus Oberlehner seems like some sort of the way to go - it uses custom Promise based solution for webpack's missing "load external url script at runtime" functionality. While it works fine with Vue 2, Vue 3 gives VNode type: undefined error.

The above mentioned article offers the following webpack external component loading solution:

I have something in place where I can build my components using this npx command (run in PowerShell):

I'm roughly trying to follow this article to import vue components dynamically from my asp.net core webapi

MyComponent.vue

I need to be able to import and render a vue component from a asp.net core WebApi

I followed this article to get an idea, and came up with the code below.

The endpoint does get hit, and returns the packaged component string as I expected, but I See these errors in the console:

Refused to execute script from 'https://localhost:44385/api/DistributedComponent/Test' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

and

vue.js:634 [Vue warn]: Failed to resolve async component: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) { switch (a.label) { case 0: return [4 /yield/, Object(js_util_external_component__WEBPACK_IMPORTED_MODULE_3["default"])('https://localhost:44385/api/DistributedComponent/Test')]; case 1: return [2 /return/, _a.sent()]; } }); }); } Reason: TypeError: Chaining cycle detected for promise #

I suspect I am not returning the component string correctly, but how should I return it? and How can I use these error messages to help me understand what I'm doing wrong?

external-component.js