'Vue can not read property 'extend' of undefined from library

When I dynamicaly load component from library file then i have en 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
fb15 @ index.ts:21
n @ bootstrap:19
0273 @ bootstrap:83
(anonymous) @ cmp.umd.min.js:1
(anonymous) @ universalModuleDefinition:9
(anonymous) @ universalModuleDefinition:1

problematic generated code

I load 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.

This compiled file is created and placed in the right place by user. Finaly user can add some extensions to the main app, without main app source code.

@edit

in dev mode i have some more informations but this still told me nothing :/ enter image description here

my code based at this article: https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/

vue.jsextendlib


Solution 1:[1]

Try exporting it as a function that returns Vue.extend()

export default () => Vue.extend({
   ...
})

Then when you import it, call that function.

Solution 2:[2]

remove your vuetify script tag on your master index.html and the error will go away

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 T. Short
Solution 2 dizad87

Related Questions