Vue 2 project: Getting an error related to the vue-composition-api and vue-demi

I have a Vue 2 application that is using single-spa. For this app I’m using Vue as an external library, by marking it as externals on the vue.config.js file (configureWebpack.externals: ['vue']). As recommended by single-spa, for dealing with the Vue library resource I’m using System.js and specifying a systemjs-importmap, like:

<script type="systemjs-importmap">
      {
        "imports": {
          "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js",
           // other stuff...
        }
     }
</script>

Everything seems to be working fine on my project. But I’m getting this error on the console when trying to use the $t function on the templates:

[Vue warn]: provide is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().

warn | @ | VM256402 vue.js:634
  | warn | @ | vue-composition-api.mjs?9241:423
  | getCurrentInstanceForFn | @ | vue-composition-api.mjs?9241:452
  | provide | @ | vue-composition-api.mjs?9241:1551
  | setup | @ | index.mjs?bbef:177
  | mergedSetupFn | @ | vue-composition-api.mjs?9241:2160
  | mergedSetupFn | @ | vue-composition-api.mjs?9241:2160
  | mergedSetupFn | @ | vue-composition-api.mjs?9241:2160
  | mergedSetupFn | @ | vue-composition-api.mjs?9241:2160
  | mergedSetupFn | @ | vue-composition-api.mjs?9241:2160
  | eval | @ | vue-composition-api.mjs?9241:1972
  | activateCurrentInstance | @ | vue-composition-api.mjs?9241:1891
  | initSetup | @ | vue-composition-api.mjs?9241:1970
  | wrappedData | @ | vue-composition-api.mjs?9241:1953
  | getData | @ | vue.js:4758
  | initData | @ | vue.js:4715
  | initState | @ | vue.js:4654
  | Vue._init | @ | vue.js:5014
  | Vue | @ | vue.js:5092
  | eval | @ | single-spa-vue.js?0461:1

 // continues...

The fact is that is working. But I have tons of console log messages. I think I found a solution, but I’m not completely sure why this is happening. So, I tried to debug the error and it seems that getCurrentInstanceForFn of the vue-composition-api is not finding the current instance. As stated on the stack trace, I’ve noted that this has to do with this portion of code:

vue2.mixin({
  setup() {
    provide(RootContextSymbol, rootContext)
  },
})

I’ve noted that the provide() function is imported from vue-demi. In order to fix this issue, if instead of defining the provide in this way (by using setup() and the composition-api), we define it in the old-fashion way:

vue2.mixin({
  provide() {
    return {
      RootContextSymbol: rootContext
    }
  }
});

The error on the console disappears. From my understanding this bug has to do with how do I load the Vue dependency and because of that is not being recognized by the composition api. Fun fact, I’m also using Pinia and other libraries that rely on the vue-composition-api and this is not happening.

Is there a good reason why we should be using this provide() method by vue-demi instead of using the code that I’m suggesting? From my understanding it will be the same as the code that I’m suggesting if only for Vue 2. If you are OK with this, I can submit a PR.

To Reproduce Steps to reproduce the behavior: I’ve already described the scenario. The key is to have Vue as an external library (on the vue.config.js) and to load it with systemjs-importmap. I’m wasn’t able to correctly reproduce it on a codesandbox environment, but I can create a test repository if it worth the case.

[nachodd]

PR Sent! 🚀

[Demivan]

Thank you for contribution. Released it in v3.0.2

You use-case is not very common so there could be more problems. Feel free to open new issues 😃