Issue with Vue and Vue-router as external dependencies

[maurer2]

Hello, we are trying to integrate an older Vue app into our exisiting single-spa app. We already have another Vue app running fine as a child app in the single-spa app. We first updated the old app to use vue-cli. Then we added the required single-spa-vue changes. We stumbled upon this issue, that our external dependencies can not be included in the app.js package.

Here is our vue.config.js

module.exports = {
    chainWebpack: config => {
        if (process.env.NODE_ENV !== 'production') {
            config.output.filename(`[name].js`)
        }

        config.externals(['vue', 'vue-router'])
    },
    configureWebpack: {
        devServer: {
            headers: { "Access-Control-Allow-Origin": "*" }
        }
    },
    lintOnSave: true,
    filenameHashing: false,
}

This config seems to work on existing old app fine, but on the new one, it creates the following error:

Uncaught ReferenceError: vue is not defined and the app.js contains the following section

/***/ }),

/***/ "vue":
/*!**********************!*\
  !*** external "vue" ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

We do include Vue and Vue-router in our App.vue.
Here are our relevant dependencies (we tried to use the same versions as in the existing app):

    "single-spa-vue": "^1.5.4",
    "systemjs-webpack-interop": "^1.1.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "core-js": "^3.4.4"
    "typescript": "^3.5.3",

Do you have any idea, what we might have missed? We also used https://github.com/joeldenning/coexisting-vue-microfrontends as a template.

Thank you

[Joel Denning]

Hi @maurer2, good question. I don't see anything immediately wrong in your example code. Have you put vue and vue-router into your import map? Could you share the full stacktrace - the line where vue is referenced but throwing an error would be helpful.

Here are a couple steps I would run in the browser console to diagnose the issue:

System.import('vue').then(vue => console.log('vue module', vue));
System.import('vue-router').then(vueRouter => console.log('vue router', vueRouter))

You should see objects with a default property on them that is the vue library. Another thing you can look at is the vue-microfrontends example: https://github.com/vue-microfrontends/

[maurer2]

Hello, thanks for the detailed reply. Here is the error message.

Uncaught ReferenceError: vue is not defined
    at eval (external "vue"?6630:1)
    at Object.vue (app.js:1129)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (main.ts:21)
    at Module../src/main.ts (app.js:1043)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:1117)
    at __webpack_require__ (app.js:849)

The first line external "vue" just contains the line module.exports = vue;

We noticed that the non-working app has an addtional chunk-vendors.js file in js/chunk-vendors.js while the working one doesn't have. Could this be the issue?

Regarding the import maps. We have put vue and vue-router into the import-map of the parent app.

Cheers

[Joel Denning]

We noticed that the non-working app has an addtional chunk-vendors.js file in js/chunk-vendors.js while the working one doesn't have. Could this be the issue?

Maybe, but I don't think so. My guess is that vue/vue-router are just not being loaded properly. Can you run the commands in the browser console that I shared yesterday and confirm whether vue and vue-router can be loaded by systemjs?

[maurer2]

Hello, thank you for the support. We've finally got it running by creating a new single-spa app via vue-cli and vue-cli-plugin-single-spa and then porting over the generated config to the old project overwriting the old config. Maybe some old webpack settings were messing up the creation of the app.js file.
Just one more question, if I may. Our older project has the app.js set to just /app.js via vue.config. in the newer project it is set to /js/app.js (see https://github.com/joeldenning/coexisting-vue-microfrontends/blob/master/app1/vue.config.js#L9).
What is the recommended setting going forward?

Cheers

[Joel Denning]

Glad to hear you got it working.

Our older project has the app.js set to just /app.js via vue.config. in the newer project it is set to /js/app.js (see https://github.com/joeldenning/coexisting-vue-microfrontends/blob/master/app1/vue.config.js#L9).
What is the recommended setting going forward?

Vue CLI uses /js/app.js - that's what I use in projects. See https://vue.microfrontends.app/importmap.json and https://github.com/vue-microfrontends which shows how