app.js:1 Uncaught navbar: Application 'navbar' died in status LOADING_SOURCE_CODE: Unexpected token '<' about coexisting-vue-microfrontends

[joeldenning]

This means that the request to download the navbar returned HTML instead of javascript. There was a bug that I fixed in 6ffee3a that solves this.

If that doesn't solve your issue, please provide more detail, including the following:

1. Are you running all applications locally? Or one at a time
2. What URL are you visiting in the browser?
3. What URL is the navbar being downloaded from?

[exaucae]

Sorry to reopen it,

I'm facing the exact same issue with my vue.js navbar.

I have three microfrontends:

• vue.js( 2.6.11) navbar
• react app
• angular app
• and a root-config

Except the navbar, the other apps work gracefully.

1. I am running all the apps locally
2. visiting http://localhost:9000
3. http://localhost:9000

Here are the root config files:

root.config.js

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

registerApplication({
  name: "@joblesschool/navbar",
  app: () => System.import("@joblesschool/navbar"),
  activeWhen: ["/"],
});

registerApplication({
  name: "@joblesschool/seeker-service",
  app: () => System.import("@joblesschool/seeker-service"),
  activeWhen: ["/seeker"],
});

registerApplication({
  name: "@joblesschool/digger-service",
  app: () => System.import("@joblesschool/digger-service"),
  activeWhen: ["/recruiter"],
});

start({
  urlRerouteOnly: true,
});

index.ejs

    <% if (isLocal) { %>
        <script type="systemjs-importmap">
    {
      "imports": {
         "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js",
         "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js",
        "@joblesschool/root-config": "//localhost:9000/joblesschool-root-config.js",
        "@joblesschool/seeker-service": "//localhost:9001/joblesschool-seeker-service.js",
        "@joblesschool/digger-service": "//localhost:9002/joblesschool-digger-service.js",
        "@joblesschool/navbar": "//localhost:9003/joblesschool-navbar.js"
      }
    }
    </script>
    <% } %>

vue.js navbar related files

// main.js

import "./set-public-path";
import Vue from "vue";
import singleSpaVue from "single-spa-vue";

import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

const vueLifecycles = singleSpaVue({
    Vue,
    appOptions: {
        render: h => h(App),
        router
    }
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

// set-public-path.js

import { setPublicPath } from "systemjs-webpack-interop";

setPublicPath("@joblesschool/navbar");

// index.js
import Vue from "vue";
import VueRouter from "vue-router";
import NavBar from "../components/Navbar";

Vue.use(VueRouter);

const routes = [{path: "/", component: NavBar}];


const router = new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes
});

export default router;

// vue.config.js

module.exports = {
    lintOnSave: false,
    publicPath: '/',
    configureWebpack: {
        devServer: {
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            disableHostCheck: true,
            sockPort: 9003,
            sockHost: "localhost",
            https: false,
            port: 9003
        },
        externals: ["vue","vue-router", /^@joblesschool\/.+/]
    },
    filenameHashing: false
};

Looking forward to hearing you soon.

[joeldenning]

My previous answer still applies - this means that the URL for one of your applications is returning HTML instead of javascript. To diagnose, go directly to the URL for the javascript file of the application in a separate browser tab. You should see javascript instead of an HTML page. If you see an HTML page, then it means that you have the wrong URL.