Problem booting app Extension (api.compatibleWith is not a function)



  • Hi folks,

    I’ve built a component, which I would like to put in an extension.
    After installing and invoking the app starts and renders fine.
    As soon as I want to use the component, this error appears on the console:

    vue.runtime.esm.js?2b0e:1888 TypeError: api.compatibleWith is not a function
        at module.exports (index.js?77cd:26)
        at resolveAsyncComponent (vue.runtime.esm.js?2b0e:3680)
        at createComponent (vue.runtime.esm.js?2b0e:3200)
        at _createElement (vue.runtime.esm.js?2b0e:3416)
        at createElement (vue.runtime.esm.js?2b0e:3353)
        at vm._c (vue.runtime.esm.js?2b0e:3485)
        at Proxy.render (Index.vue?5153:5)
        at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
        at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
        at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    

    I’ve stepped through it and found that the api parameter is a function

    api
    ƒ () {
        if (!called) {
          called = true;
          fn.apply(this, arguments);
        }
      }
    

    So yes, .compatibleWith is not there.
    Same goes for .extendQuasarConf().

    My index.js looks like this:

    /**
     * Quasar App Extension index/runner script
     * (runs on each dev/build)
     *
     * Docs: https://quasar.dev/app-extensions/development-guide/index-api
     * API: https://github.com/quasarframework/quasar/blob/master/app/lib/app-extension/IndexAPI.js
     */
    
    module.exports = function(api) {
      const confExtension = conf => {
        debugger;
        conf.boot.push("~quasar-app-extension-sweet-editor/src/boot/rteditor.js");
        conf.build.transpileDependencies.push(
          /quasar-app-extension-sweet-editor[\\/]src/
        );
        conf.css.push(
          "~quasar-app-extension-sweet-editor/src/component/styles/editor.scss"
        );
        conf.css.push(
          "~quasar-app-extension-sweet-editor/src/component/styles/ruler.scss"
        );
      };
    
      // quasar compatibility check
      api.compatibleWith("@quasar/app", "^1.0.0");
    
      // extend quasar.conf
      api.extendQuasarConf(confExtension);
    };
    
    

    This is my boot file:

    import RTEditor from "quasar-app-extension-sweet-editor"; ///src/component/RTEditor.vue";
    
    export default args => {
      const { Vue } = args;
      Vue.component("RTEditor", RTEditor);
    };
    
    

    When I now use the <RTEditor> tag in my template, the error occurs.

    I’ve read in another thread that the imports might be wrong. But that was to solve loading an extension into a non cli app, whereas I do use the CLI.

    Can someone help and what do you need to be able to help?

    Thanks 🙂



  • Right, when I change the name under wich the component is registered in the boot file, I get the usual “did you register correctly…” error.
    If it matches, this does not happen, which makes me belive at least the component could be loaded in the boot file and is registered.



  • Also, when I change the import to “quasar-app-extension-sweet-editor/src/component/RTEditor.vue”, as it is done in some existing templates, the compilation stops at
    app:progress Compiling SPA... +196ms


Log in to reply