Our Vue 2.x.x application, written in typescript, needs to be structured into modules such as /users, /articles, /reports, following a micro frontend architecture.
We are looking for a solution that allows us to load these modules dynamically based on user permissions. After researching, we decided to opt for SystemJS. Here is an example of how we plan to implement it:
export const ApplicationModuleService = {
createModule(name: string, url: string, activeWhen = "/", props = {}): RegisterApplicationConfig {
return {
name,
app: () => window.System.import(url), //system js is loading from cdn. in global.d has definition
activeWhen,
customProps: props
}
}
}
Although we have imported SystemJS from CDN, when transpiling with webpack, we face challenges using System.import and are forced to utilize the window object instead.
Attempting to use System.import results in webpack transpiling it into a shortened property like l.import(...). We have tried creating global properties with webpack plugins like DefinePlugin or ProvidePlugin, but without success.
If anyone has encountered this issue before and found a workaround, we would greatly appreciate your insights.