Single SPA + Vite - Cannot use import statement outside a module

Question

I am using Typescript + Vite + Single SPA Just trying to replicate the https://github.com/joeldenning/vite-single-spa-example and https://github.com/joeldenning/vite-single-spa-root-config.

Hence, in my index.ejs I have

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

and in org-root-config.js I have

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

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

  activeWhen: "/",
});

start({
  urlRerouteOnly: true,
});

Regarding the MF itself, I have the following Vite config:

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',
      },
    ],
  },

};

The name of the MF module in package.json is "@my/module".

My main.ts is this:

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;

But the code it generates contains "import" and therefore, "Uncaught SyntaxError: Cannot use import statement outside a module" is shown. Can anyone help me with this?

The broswer complains about this part {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"

Not related to the problem, but just a heads up - `export const bootstrap = vueLifecycles.bootstrap`, etc. — J. Titus, Jan 31 '22 at 02:52
Thanks for the heads up, just fixed this, although it didn't fix the issue — Eduardo Sousa, Jan 31 '22 at 12:06
have you tried replacing `() => System.import("@my/module")` with `() => import("@my/module")` when registering your application — jones1008, Apr 12 '22 at 11:59
Why are you including the systemjs-webpack-interop? It sets the [__webpack_public_path__](https://github.com/joeldenning/systemjs-webpack-interop/blob/main/public-path.js#L42) which should not be used here. Also, the alias might need a trailing / to not conflict with the `@` in your imports. You could try this, which wouldn't match `@my/module` and others: `{ find: '@/', replacement: path.resolve(__dirname, './src') },` Can you post a reproduction somewhere? — Zach Leighton, Jul 13 '22 at 06:24
Have you seen this part of single-spa documentation https://single-spa.js.org/docs/ecosystem-vite/#native-modules-vs-systemjs ? " a general recommendation is to use native modules during local development, but SystemJS in production (since browser support for Import Maps is still pending)." Looks like SystemJS solution is "still pending" — Mike, Oct 16 '22 at 03:42

Single SPA + Vite - Cannot use import statement outside a module

0 Answers0