Estoy usando Typescript + Vite + Single SPA Solo intento replicar el https://github.com/joeldenning/vite-single-spa-example y https://github.com/joeldenning/vite-single-spa-root- configuración

Por lo tanto, en mi index.ejs tengo

 <script type="systemjs-importmap"> { "imports": { "@org/root-config": "//localhost:9000/org-root-config.js", "@my/module": "http://127.0.0.1:8080/assets/index.d4261135.js" } }

y en org-root-config.js tengo

 import { registerApplication, start } from "single-spa"; registerApplication({ name: "@my/module", app: () => System.import("@my/module"), activeWhen: "/", }); start({ urlRerouteOnly: true, });

Con respecto al MF en sí, tengo la siguiente configuración de Vite:

 import vue from '@vitejs/plugin-vue'; import { nodeResolve } from '@rollup/plugin-node-resolve'; export default { rollupOptions: { input: 'src/main.ts', format: 'system', preserveEntrySignatures: true, }, base: 'http://localhost:3000', plugins: [ vue({ template: { transformAssetUrls: { base: '/src', }, }, }), nodeResolve(), ], resolve: { alias: [ { find: '@', replacement: '/src', }, ], }, };

El nombre del módulo MF en package.json es "@my/module".

Mi main.ts es este:

 import { createApp, h } from 'vue'; import Equal from 'equal-vue'; import { Quasar } from 'quasar'; import '@/axiosConfig'; import { setPublicPath } from 'systemjs-webpack-interop'; import singleSpaVue from 'single-spa-vue'; import App from './App.vue'; import { store, vuexKey } from '@/store'; import { setupI18n } from './i18n'; import router from './router'; import '@quasar/extras/material-icons/material-icons.css'; import 'quasar/src/css/index.sass'; setPublicPath('@my/module'); const vueLifecycles = singleSpaVue({ createApp, appOptions: { render() { h(App, { name: this.name, }); }, }, handleInstance(instance: any): void | Promise<void> { instance.use(setupI18n()) .use(store, vuexKey) .use(router) .use(Quasar) .use(Equal); }, }); export const bootstrap = vueLifecycles.bootstrap; export const mount = vueLifecycles.mount; export const unmount = vueLifecycles.unmount;

Pero el código que genera contiene "importar" y, por lo tanto, se muestra "Error de sintaxis no detectado: no se puede usar la declaración de importación fuera de un módulo". Puede alguien ayudarme con esto?

El navegador se queja de esta parte {a as u,o as G,s as $,d as g,c as q,u as B,b as V,e as F,n as O,f as K,g as W,h as z,r as J,i as Q,w as P,j as m,k as X,l as Y,m as T,p as f,q as Z,t as ee,v as te,x as ne,y as oe,z as se,A as re,B as ae,Q as ie,C as ce}from"./vendor.ba4ac50a.js"