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 nuxt/nuxt#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