“died in status LOADING_SOURCE_CODE” Error in Single-spa Application using Vue 3.js

Introduction

Single-spa is a well-known library that enables the development of micro-frontends, which are small, standalone programmes that can be connected to form a bigger, more complicated application. In this post, we will demonstrate how to develop a single-spa application with Vue 3.js, as well as handle a frequent issue that may emerge during the process.

Problem

When creating a single-spa application using Vue 3.js, you may encounter the following error:

Uncaught TypeError: application '@MySingleSpaProject/login' died in status LOADING_SOURCE_CODE: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode) is not a function...

This error can occur due to a conflict between Vue 3.js and single-spa.

Solution

The solution to this problem involves two steps:

Creating a vue.config.js file with the following configuration:

module.exports = {
  lintOnSave: false,
  chainWebpack(config) {
    config.module.rule('vue').use('vue-loader').tap(options => {
      options.hotReload = false;
      return options;
    });
  },
  configureWebpack: {
    output: {
      libraryTarget: 'system'
    },
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*"
      },
    },
    externals: ["vue", /^@MySingleSpaProject\/.+/]
  },
  filenameHashing: false
};

This configuration sets up the project to work with single-spa, by disabling hot-reloading and setting the libraryTarget to ‘system’ and also externalizing vue package

Adding the following script in the root config ejs file before root-config:

<script>
    Object.getPrototypeOf(System).firstGlobalProp = true;
    System.set(System.resolve('vue'), window.Vue)
    System.import('@MySingleSpaProject/root-config');
</script>

This script sets the `firstGlobalProp` property of the prototype of `System` to `true`, sets the `vue` property of `System` to the global `Vue` object, and imports the `@MySingleSpaProject/root-config` module. By adding this script before the root-config it will resolve the issue of Uncaught TypeError: application ‘@MySingleSpaProject/login’ died in status LOADING_SOURCE_CODE: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode) is not a function.

Building and Running the Application

Build the application using webpack or any other build tool.

npm run build

Run the application on a local web server.

Conclusion

Creating a single-spa application using Vue 3.js requires a few extra steps, such as configuring the vue.config.js file and adding a script to the root config ejs file. However, with the right setup and by following the solutions provided, you can easily create a powerful, modular application that can handle multiple microfrontends. Keep in mind that you should always test your application thoroughly to make sure it works as expected.

I hope this post has been helpful in guiding you through the process of creating a single-spa application using Vue 3.js and also resolving the Uncaught TypeError. If you have any further questions, feel free to ask!