I'm currently facing an issue while developing a microfrontend using single-spa-vue and Vue 2.6.12.
To set up my project, I am utilizing the webpack module federation plugin.
Below is the entry point for my application:
src/app.ts
import singleSpaVue from 'single-spa-vue';
import Vue from 'vue';
import Main from './Main.vue';
import router from './router';
const lifecycles = singleSpaVue({
Vue,
appOptions: {
render(h: any) {
return h(Main as any);
},
router,
} as any,
});
export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;
The configuration details from my webpack.config.js file can be found below:
// Contents of webpack.config.js here...
/*
* Code snippet removed for brevity
*/
In addition to these files, I have also included an index.ts file which contains the following code:
src/index.ts
import { start, registerApplication } from 'single-spa'
registerApplication({
name: 'content',
app: () => import('content/Content' as any),
activeWhen: '/',
},)
start()
However, upon running yarn start and navigating to localhost:3002, I encounter the error displayed in this error image.
If anyone has encountered a similar issue or has expertise in solving such problems, your assistance would be greatly appreciated!
Thank you!