单一 SPA + Vite - 无法在模块外部使用 import 语句

Question

我正在使用 Typescript + Vite + Single SPA 只是尝试复制https://github.com/joeldenning/vite-single-spa-example 和https://github.com/joeldenning/vite-single-spa-root-配置。

因此，在我的 index.ejs 中我有

  <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"
  }
}

在 org-root-config.js 中我有

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@my/module",
  app: () => System.import("@my/module"),

  activeWhen: "/",
});

start({
  urlRerouteOnly: true,
});

关于MF本身，我有以下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',
      },
    ],
  },

};

package.json 中 MF 模块的名称为“@my/module”。

我的 main.ts 是这样的：

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;

但它生成的代码包含“导入”，因此显示“未捕获的语法错误：无法在模块外部使用导入语句”。谁能帮我这个？

浏览器抱怨这部分{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"