No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    4
    509
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H
      hardtmedia last edited by

      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 🙂

      1 Reply Last reply Reply Quote 0
      • H
        hardtmedia last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • H
          hardtmedia last edited by

          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

          1 Reply Last reply Reply Quote 0
          • C
            Cosby last edited by

            Hello i have a very similar issue. We’re you able to fix this?

            1 Reply Last reply Reply Quote 0
            • First post
              Last post