application 'app-one' died in status LOADING_SOURCE_CODE: systemjs-webpack-interop: rootDirectoryLevel (2) is greater than the number of directories (1) in the URL path http://localhost:8080/app.js

[AharonKre]

Data dump

Applications:

{
  "framework": "vue",
  "name": "app-one",
  "pathPrefix": "/",
  "sharedDeps": [],
  "useNativeModules": false,
  "url": "http://localhost:8080/app.js"
}

Import map:

{
  "imports": {
    "app-one": "http://localhost:8080/app.js"
  },
  "scopes": {}
}

Description

Hi,

I'm trying a POC with single-spa with vue2+typescript. I've followed the instructions here: https://itnext.io/setup-a-micro-frontend-architecture-with-vue-and-single-spa-2c89528bf72f, and I'm getting the following error: "application 'app-one' died in status LOADING_SOURCE_CODE: systemjs-webpack-interop: rootDirectoryLevel (2) is greater than the number of directories (1) in the URL path http://localhost:8080/app.js" Appreciate any direction \ idea for why I'm getting this error.

Thanks

[joeldenning]

Hi @AharonKre, the error message you're seeing is caused by some things in the vue.config.js in the blog post you shared:

https://gist.github.com/mstrlaw/09e20406cb54bcd116ba8e9dc4c742f7#file-vue-config-js-L17

A couple weeks ago we released vue-cli-plugin-single-spa@2.0.0 which changed a couple things and made that code not work. One way to fix your code would be to delete line 17 of the vue config (the one that sets output.filename) and then use http://localhost:8080/js/app.js as the URL to your microfrontend.

A simpler and more supported approach, though, would be just to use the single-spa CLI which will set you up with a functioning project in one command. To use the cli, run the following:

npm init single-spa

# if using yarn
yarn create single-spa

[AharonKre]

Thanks!!