Vue can't read 'extend' of undefined from lib

Programming
, ,
1

I am dynamically loading a component from an external library file and I am receiving an error:

Uncaught TypeError: Cannot read property 'extend' of undefined
    at Module.fb15 (index.ts:21)
    at n (bootstrap:19)
    at 0273 (bootstrap:83)
    at cmp.umd.min.js:1
    at universalModuleDefinition:9
    at universalModuleDefinition:1

I am loading the component in this way:

//this is sfc from main app source code 
<template>
  <component :is="gwComponent" />
</template>

<script>
import externalComponent from "@/utils/external-component";
export default {
  name: "extensions-view",
  components: {},
  props: ["_type_", "_instance_"],
  data() {
    return {
      info: {
        description: ""
      },
      instances: []
    };
  },
  computed: {
    gwComponent() {
      if (this._instance_ == "all") {
        return () => import("../components/ExtensionsInstances.vue");
      } else {
        return () =>
          externalComponent(
              window.location.origin +
              "/assets/gw/" +
              this._type_ +
              "/cmp.umd.min.js"
          );
      }
    }
  },

};
</script>

// src/utils/external-component.js from main app source code
export default async function externalComponent(url) {
  const name = url
    .split("/")
    .reverse()[0]
    .match(/^(.*?)\.umd/)[1];

  if (window[name]) return window[name];

  window[name] = new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.async = true;
    script.addEventListener("load", () => {
      resolve(window[name]);
    });
    script.addEventListener("error", () => {
      reject(new Error(`Error loading ${url}`));
    });
    script.src = url;
    document.head.appendChild(script);
  });

  return window[name];
}

The file cmp.umd.min.js is created by compiling another SFC with npx vue-cli-service build --target lib --formats umd-min --no-clean --dest build/bin --name 'cmp' src/components/ExtEntryPointComponent.vue.

I am using the code from this article to build a distributed Vue application, where users can add extensions to the main app without modifying the main app source code. However, I am receiving the error Uncaught TypeError: Cannot read property 'extend' of undefined.

2

The Uncaught TypeError: Cannot read property 'extend' of undefined error is caused by the external component not being defined properly. This can happen if the component is not loaded fully or if there is an issue with the component code.

To fix the issue, you can try the following steps:

  1. Make sure that the external component is being loaded properly by checking the network tab in the browser’s developer tools. Look for any errors or issues with the component loading.

  2. Check the component code to ensure that it is written correctly and is exporting the component properly.

  3. Try using a different method to load the component, such as using import() or require() instead of loading it dynamically with a script tag.

  4. If none of the above steps work, try rebuilding the component with different options or using a different method to build it.

Note: It is also possible that the error is caused by a compatibility issue between the external component and the main app. In this case, you may need to modify the component code or use a different component altogether.