TypeScript error when installing the plugin with Vue 2.7

[glumb]

Reproduction

https://github.com/glumb/vue-firebase-setup

Steps to reproduce the bug

1. create new Vue 2.7 project vue create vuefire-test
2. install npm i firebase, npm i vuefire
3. run npm run serve
4. Add to main.js:

import { firestorePlugin } from "vuefire";
Vue.use(firestorePlugin);

Expected behavior

builds without error

Actual behavior

error during build

 ERROR  Failed to compile with 1 error                                                                                                                          14:52:56

 error  in ./node_modules/vuefire/dist/shared/vuefire.823f1be4.mjs

export 'ssrContextKey' (imported as 'ssrContextKey') was not found in 'vue-demi' (possible exports: EffectScope, Vue, Vue2, computed, createApp, customRef, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, install, isProxy, isReactive, isReadonly, isRef, isShallow, isVue2, isVue3, markRaw, mergeDefaults, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useListeners, useSlots, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect)

ERROR in ./node_modules/vuefire/dist/shared/vuefire.823f1be4.mjs 56:43-56
export 'ssrContextKey' (imported as 'ssrContextKey') was not found in 'vue-demi' (possible exports: EffectScope, Vue, Vue2, computed, createApp, customRef, defineAsyncComponent, defineComponent, del, effectScope, getCurrentInstance, getCurrentScope, h, inject, install, isProxy, isReactive, isReadonly, isRef, isShallow, isVue2, isVue3, markRaw, mergeDefaults, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, provide, proxyRefs, reactive, readonly, ref, set, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useListeners, useSlots, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect)
 @ ./node_modules/vuefire/dist/index.mjs 2:0-434 3:0-183 3:0-183 3:0-183 3:0-183 3:0-183 3:0-183 3:0-183 45:9-33 45:49-65 45:105-124 45:170-188 49:14-28 62:51-55 65:15-29 74:9-17 94:20-24 119:33-37 120:35-39 121:35-39 122:33-37 123:28-32 176:15-19 181:26-44 185:6-11 188:79-93 194:29-33 200:17-21 222:20-24 276:21-35 291:7-13 311:17-30 322:17-25 348:75-82 362:15-19 412:18-25 439:23-27 492:22-26 526:12-27 526:43-50 527:23-27 551:15-19 556:26-44 560:6-11 563:79-93 569:29-33 575:17-21 583:16-29 596:20-24 634:31-38 648:22-36 690:18-32 690:48-62 768:18-32 768:48-62 816:17-31 817:4-19 818:4-27 822:9-17 822:28-42 825:20-34 830:69-83 832:29-33 865:111-125 868:29-33 926:14-18 996:14-38 1001:0-592
 @ ./src/main.js 3:0-42 4:8-23

webpack compiled with 1 error

Additional information

node -v v16.18.1
npm -v 8.19.2

[tpkee]

I've got the same problem, any update on this?

[tspoke]

I have the same issue using :

• vuefire (3.1.0)
• Vue2 (2.7.14)
• Vite (4.3.8)

I used this setup :

export const installVuefire = () => {
  Vue.use(VueFire, {
    modules: [
      VueFireFirestoreOptionsAPI({
        // same behavior as vuefire v2
        reset: true,
        wait: false
      }),
      VueFireDatabaseOptionsAPI({
        // same behavior as vuefire v2
        reset: true,
        wait: false
      })
    ]
  });
};

Starting the server :

  VITE v4.3.8  ready in 912 ms

  ➜  Local:   http://localhost:8080/
  ➜  Network: use --host to expose
  ➜  press h to show help
✘ [ERROR] No matching export in "node_modules/.pnpm/vue-demi@0.14.5_vue@2.7.14/node_modules/vue-demi/lib/index.mjs" for import "ssrContextKey"

    node_modules/.pnpm/vuefire@3.1.0_firebase@9.22.0+vue@2.7.14/node_modules/vuefire/dist/shared/vuefire.7f889637.mjs:2:37:
      2 │ import { getCurrentInstance, inject, ssrContextKey, effectScope, computed, ref } from 'vue-demi';
        ╵                                      ~~~~~~~~~~~~~

/Users/demo/project/node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:1636
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
node_modules/.pnpm/vuefire@3.1.0_firebase@9.22.0+vue@2.7.14/node_modules/vuefire/dist/shared/vuefire.7f889637.mjs:2:37: ERROR: No matching export in "node_modules/.pnpm/vue-demi@0.14.5_vue@2.7.14/node_modules/vue-demi/lib/index.mjs" for import "ssrContextKey"
    at failureErrorWithLog (/Users/demo/project/node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:1636:15)
    at /Users/demo/project/node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:1048:25
    at /Users/demo/project/node_modules/.pnpm/esbuild@0.17.19/node_modules/esbuild/lib/main.js:1512:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 37,
        file: 'node_modules/.pnpm/vuefire@3.1.0_firebase@9.22.0+vue@2.7.14/node_modules/vuefire/dist/shared/vuefire.7f889637.mjs',
        length: 13,
        line: 2,
        lineText: "import { getCurrentInstance, inject, ssrContextKey, effectScope, computed, ref } from 'vue-demi';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No matching export in "node_modules/.pnpm/vue-demi@0.14.5_vue@2.7.14/node_modules/vue-demi/lib/index.mjs" for import "ssrContextKey"'
    }
  ],
  warnings: []
}

Node.js v18.13.0
 ERROR  Command failed with exit code 1.

---

Some of my researches

Looks like the import in the shared.ts file of the ssrContextKey is invalid (vue-demi) and should be updated to :

import { ssrContextKey } from '@vue/runtime-core';

I'm still blocked with the Vue.use(Vuefire,...) which now gives this error : index.mjs:1190 Uncaught TypeError: app.provide is not a function

[posva]

The current plugin VueFire only works for Vue 3. We will need to add another plugin that is Vue 2 only. A similar things happens with the ssrContextKey which is Vue 3 only and is used for SSR purposes.

FYI if you are starting a new project, use Vue 3

[davidkassa]

I'm still receiving the following error:

TypeError: app.provide is not a function
VueFire index.mjs:1191
use VueJS
main.js:35

from

function VueFire(app, { firebaseApp, modules = [] }) {
app.provide(_FirebaseAppInjectionKey, firebaseApp);
for (const firebaseModule of modules) {
firebaseModule(firebaseApp, app);
}
}

[posva]

In that case:

• Make sure vue-demi is up to date with npm i vue-demi@latest (use your package manager)
• Make sure you are using createApp() from vue-demi: https://vuefire.vuejs.org/guide/getting-started.html#vue-2

[davidkassa]

yes, vue-demi@0.14.5 and I'm using import { createApp } from 'vue-demi'