Nuxt 3.7.0 currently broken with VueFire

[posva]

The current version of Nuxt (3.7.0) doesn't work with nuxt-vuefire. Downgrade to 3.6.5 until this is fixed

Opened https://github.com/nuxt/nuxt/issues/22918 to add more info

[luc122c]

I was just about to post an issue for this. I'm getting Component app-check has not been registered yet after upgrading to Nuxt 3.7.0.

3.6.5

``` Nuxi 3.6.5 9:49:35 AM Nuxt 3.6.5 with Nitro 2.5.2 9:49:35 AM 9:49:35 AM > Local: http://localhost:3050/ > Network: http://192.168.0.103:3050/ > Network: http://192.168.0.234:3050/ ✔ Nuxt DevTools is enabled v0.8.0 (experimental) 9:49:36 AM ℹ Using zod with vee-validate 9:49:36 AM ✔ Router autocompletions generated 🚦 9:49:36 AM [9:49:57 AM] WARN [@vue/compiler-sfc] This project is using defineModel(), which is an experimental feature. It may receive breaking changes or be removed in the future, so use at your own risk. To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/503. 9:49:35 AM [9:49:58 AM] WARN node_modules/openapi-typescript-fetch/dist/esm/fetcher.js (1:17) The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten [9:49:58 AM] WARN node_modules/openapi-typescript-fetch/dist/esm/fetcher.js (1:25) The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten ✔ Nitro built in 1701 ms nitro 9:49:58 AM ℹ ✨ optimized dependencies changed. reloading 9:49:58 AM ℹ Vite client warmed up in 13904ms 9:49:59 AM Firebase initialised ```

3.7.0

``` Nuxt 3.7.0 with Nitro 2.6.2 9:52:29 AM 9:52:30 AM █▀▀▀▀▀▀▀█▀▀▀▀█▀██▀█▀▀▀▀▀▀▀█ █ █▀▀▀█ ██▀█ ▄ ███ █▀▀▀█ █ █ █ █ ███ ▀▄▄▄▄█ █ █ █ █ ▀▀▀▀▀ █▀▄▀▄▀█▀█ █ ▀▀▀▀▀ █ █▀▀█▀▀█▀█▄ ██ ▄▄▀██▀█████▀█ █▄█▄██▄▀▄█▀▄█▀▀▀ ▄ ▀▀ ▄▄▀█ █▄ ▀▀▀▄▄▀▀█▀█ ▄▀ ▀█▄▄▄▄ █ █ ▀▀█▀▄▀▀▄█ █▄██ ▀▀█▄▄▀▀ ▀█ █ █▄██▄▀█▄▄ ▄▀▀ █ ▀▀▀ █ ▀▄█ █▀▀▀▀▀▀▀█▄▀█▀ █ ▄ █▀█ ▀█▄▀█ █ █▀▀▀█ █▀ ▄█▄▄█▀ ▀▀▀ ▀████ █ █ █ █▄▀▄ ▄█▀███▄▄▀▄▀ █ █ ▀▀▀▀▀ █ ▄▄ ██▀ ▀▄ ▄▄▀▄▄ █ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ➜ Local: http://localhost:3050/ ➜ Network: http://192.168.0.103:3050/ [QR code] ➜ Network: http://192.168.0.234:3050/ ✔ Nuxt DevTools is enabled v0.8.0 (experimental) 9:52:31 AM ℹ Using zod with vee-validate 9:52:31 AM ✔ Router autocompletions generated 🚦 9:52:31 AM [9:52:44 AM] WARN [@vue/compiler-sfc] This project is using defineModel(), which is an experimental feature. It may receive breaking changes or be removed in the future, so use at your own risk. To stay updated, follow the RFC at https://github.com/vuejs/rfcs/discussions/503. ℹ ✨ optimized dependencies changed. reloading 9:52:45 AM [9:52:45 AM] WARN node_modules/openapi-typescript-fetch/dist/esm/fetcher.js (1:17) The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten [9:52:45 AM] WARN node_modules/openapi-typescript-fetch/dist/esm/fetcher.js (1:25) The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten ℹ Vite client warmed up in 13471ms 9:52:45 AM ✔ Nitro built in 1817 ms nitro 9:52:45 AM Firebase initialised [nuxt] [request error] [unhandled] [500] Component app-check has not been registered yet at Provider.Provider.initialize (./node_modules/@firebase/component/src/provider.ts:239:13) at initializeAppCheck (./node_modules/@firebase/app-check/src/api.ts:105:29) at Module.VueFireAppCheckServer (./node_modules/vuefire/dist/server/index.mjs:107:20) at ./node_modules/nuxt-vuefire/dist/runtime/app-check/plugin.server.mjs:13:25 at ./virtual:nuxt:/Users/luc122c/Dev/pixel.stream/.nuxt/plugins/server.mjs:50:89 at Module.executeAsync (./node_modules/unctx/dist/index.mjs:111:19) at setup (./virtual:nuxt:/Users/luc122c/Dev/pixel.stream/.nuxt/plugins/server.mjs:50:65) at ./node_modules/nuxt/dist/app/nuxt.js:114:60 at fn (./node_modules/nuxt/dist/app/nuxt.js:162:44) at Object.callAsync (./node_modules/unctx/dist/index.mjs:68:55) [nuxt] [request error] [unhandled] [500] Component app-check has not been registered yet at Provider.Provider.initialize (./node_modules/@firebase/component/src/provider.ts:239:13) at initializeAppCheck (./node_modules/@firebase/app-check/src/api.ts:105:29) at Module.VueFireAppCheckServer (./node_modules/vuefire/dist/server/index.mjs:107:20) at ./node_modules/nuxt-vuefire/dist/runtime/app-check/plugin.server.mjs:13:25 at ./virtual:nuxt:/Users/luc122c/Dev/pixel.stream/.nuxt/plugins/server.mjs:50:89 at Module.executeAsync (./node_modules/unctx/dist/index.mjs:111:19) at setup (./virtual:nuxt:/Users/luc122c/Dev/pixel.stream/.nuxt/plugins/server.mjs:50:65) at ./node_modules/nuxt/dist/app/nuxt.js:114:60 at fn (./node_modules/nuxt/dist/app/nuxt.js:162:44) at Object.callAsync (./node_modules/unctx/dist/index.mjs:68:55) ```

[posva]

Yes, the problem could either come from Firebase, Nuxt, any of its sub dependencies like vite, or this module. Still don't know why this is happening but I suspect it's related to some deduping issue as it works locally in this mono repo. Any help is welcome, until then, downgrade Nuxt or disable app-check.

The problem seems to only affect SSR apps in dev mode.

[gsavvidis96]

Having an auth middleware like stated in the docs

// middleware/auth.ts

export default defineNuxtRouteMiddleware(async (to, from) => {
  const user = await getCurrentUser();

  console.log(user);

  // redirect the user to the login page
  if (!user) {
    return navigateTo({
      path: "/login",
      query: {
        redirect: to.fullPath,
      },
    });
  }
});

// pages/index.vue

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: ["auth"],
});
</script>

<style lang="scss" scoped></style>

results in an error:

Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

Although in a component I am able to get the current user while rendered server side.

// login.vue

<template>
  <div>
    <h1>Login</h1>
  </div>
</template>

<script setup lang="ts">
const user = useCurrentUser();

console.log(user.value);
</script>

<style scoped></style>

When using nuxt@3.6.5 the above examples work as expected. Only happens using nuxt@3.7.0

[posva]

This got fixed upstream and should be good on the next release of Nuxt.

[posva]

BTW, You can test locally with https://nuxt.com/docs/guide/going-further/edge-channel/#edge-release-channel until a new version of Nuxt is releasing (probably 3.7.1)

[dosstx]

About to give Vuefire a try again. Can someone confirm that using Nuxt 3.7.1 fixes the problem for this issue?

[posva]

It is fixed

[fayazara]

I am still getting this issue in nuxt 3.8.0 @posva

Package versions

"vuefire": "^3.1.17"
"nuxt-vuefire": "^0.4.0",
"nuxt": "^3.8.0",

[posva]

This shouldn’t come from VueFire as the code hasn’t changed in a while. It could be a bug in your code or from Nuxt

[fayazara]

Let me try to reproduce this.

[fayazara]

@posva I created a new project with the latest Nuxt version v3.8.0 and added Vuefire and I still get this error as soon as I start my dev server with yarn dev Here's the repo - https://github.com/fayazara/vuefire-demo Am I doing something wrong here?

The default Firebase app does not exist. Make sure you call initializeApp() before using any of the Firebase services.

I also get this warning "firebase.json" does not exist, not sure if this is related to something, since I already added my firebase config in nuxt.config.ts file

[posva]

You haven’t configured your project. You can try with the repro we have instead. It comes pre configured.

cheers

[fayazara]

Thank you for the response, looking into the repro template and will try to recreate our project the same way.

Just curious, what do you mean by "You haven’t configured your project." 🤔

Update: My nuxt config is exactly similar to the the starter template - https://github.com/posva/nuxt--vuefire-example-spark-plan/blob/main/nuxt.config.ts, yet I still get this error, can you please tell me a little more on what I am doing wrong. @posva, thank you!

[fayazara]

Just cloned and checked that the spark plan template (https://github.com/posva/nuxt--vuefire-example-spark-plan/) too throws the same error.

Tested it on 3.7.3 same error Upgraded Nuxt to 3.8.0 same error

CC: @posva

[posva]

Just tested myself and it's working properly. You probably didn't have the credentials or didn't use the emulators. I even updated the dependencies. Feel free to give it another look and good luck!

[fayazara]

Is it necessary to use the emulator?

We're only using the auth and nothing else.

[fayazara]

Ah, I just added service-account.json in our root with the environment variable and it looks like it's working now.

This was not clear from the docs, I will try to update the docs and make a PR. Thank you for he help and assistance. 🫡

[wjlee2020]

@fayazara curious, do we need the service-account.json if we aren't planning on using ssr? for me, the initializeApp error goes away when I set ssr: false in my nuxt config, however i get a auth/invalid-credential error from firebase since I'm not calling initalizeApp()

[marcustoy]

Ah, I just added service-account.json in our root with the environment variable and it looks like it's working now.

This was not clear from the docs, I will try to update the docs and make a PR. Thank you for he help and assistance. 🫡

Somehow adding a service-account.json file works for me as well. Thanks @fayazara !