Firebase - Could not reach Cloud Firestore backend #14608
Comments
|
*Ubuntu 22.04.1 LTS |
|
any update on this? |
|
I have the same issue on Windows and haven't found a solution yet. |
|
Still an issue in 3.0.0-rc.9. You can still use Firestore if you initialize the plugin client-side (firebase.client.ts). But you lose the SSR benefits. Hope this gets fixed before the stable release. Else it's pretty much unusable for Firestore users. |
|
as far as I know this is the same issue as: #13393 |
|
Is it really? I mean from the bug description here, the log looks quite different from what I provided above - https://github.com/niklv/nuxt3_firebase9_ssr_bug#bug-description. |
|
I meant that both of this issue and #13393 are caused by unintened module resolution.
Similaly, some other firebase modules does not work on SSR dev mode. |
|
Still an issue in 3.0.0-rc.11 :( |
|
just a quick note that it is still an issue with rc.12 and firebase 9.12.1 |
|
Still an issue with 9.12.1 on MacOS 13 Ventura Edit: I commented here thinking I was in the firebase repo, but rather thank delete my comment, I thought I'd share my fix even though my issue was nothing to do with Nuxt specifically. I was trying to use a firebase app against the emulator suite using the |
|
still an issue, any ideas? |
|
So I've managed to connected to firestore with functions and functions-admin using composables and plugins and api endpoints. |
@vincekruger If possible, could you share the minimal working code? I think that may help many people here. |
|
Here is something basic for the front end. It's better to use asyndData https://nuxt.com/docs/getting-started/data-fetching. Server middleware is even better, because if you host on Firebase Hosting and use a function to serve you can use firebase-admin and lock down your database - https://nuxt.com/docs/guide/directory-structure/server
import { initializeApp } from 'firebase/app'
import { initializeAppCheck, ReCaptchaV3Provider } from 'firebase/app-check'
import { getAnalytics } from 'firebase/analytics'
import { getPerformance } from 'firebase/performance'
export default defineNuxtPlugin((nuxtApp) => {
// Get Config
const config = useRuntimeConfig()
// Initialize Firebase
const app = initializeApp(config.public.firebase_config)
// App Check
initializeAppCheck(app, {
provider: new ReCaptchaV3Provider(config.public.recaptcha_site_key),
isTokenAutoRefreshEnabled: true,
})
// Initialize Performance Monitoring
getPerformance(app)
// Initialize Analytics
getAnalytics(app)
// Provide Firebase
nuxtApp.provide('firebase', {
app,
})
})
import _ from 'lodash'
import { getFirestore, connectFirestoreEmulator, collection, query, where, getDocs } from 'firebase/firestore'
export const useFirestore = async () => {
if (process.server) return
const { $firebase } = useNuxtApp()
const db = getFirestore($firebase.app)
connectFirestoreEmulator(db, 'localhost', 8080)
const collectionRef = collection(db, 'user')
const q = query(collectionRef, where('active', '==', true))
const querySnapshot = await getDocs(q)
return _.map(querySnapshot.docs, (doc) => ({ id: doc.id, active: doc.get('active') }))
}Usage in a Vue page/component. <script setup lang="ts">
const data = await useFirestore()
</script>
<template>
{{ data }}
</template> |
|
Adding this to the import { fileURLToPath } from 'node:url'
import { resolve } from 'node:path'
// we need the root node modules where packages are hoisted
const nodeModules = fileURLToPath(
new URL('./node_modules', import.meta.url)
)
export default defineNuxtConfig({
hooks: {
// cannot be added in nuxt's resolve.alias
'vite:extendConfig': (config, { isServer }) => {
if (isServer) {
config.resolve ??= {}
config.resolve.alias ??= {}
// @ts-ignore
config.resolve.alias['firebase/firestore'] = resolve(
nodeModules,
'firebase/firestore/dist/index.mjs'
)
// @ts-ignore
config.resolve.alias['@firebase/firestore'] = resolve(
nodeModules,
'@firebase/firestore/dist/index.node.mjs'
)
// add any other firebase alias you need
}
},
},
})I opened But I think this error comes either from vite or from the firebase packages' |
Environment
WSL 2 - Nuxt Version 3.0.0-rc.8 will result in the same issue
module content will have no effect (positive or negative)
Linuxv16.16.03.0.0-rc.6npm@8.15.1vitecss,modules,content@nuxt/content@2.0.1-Reproduction
https://stackblitz.com/edit/github-kzwv1p?file=plugins/firebase.ts
Just a very basic firebase firestore setup. You have to provide your own firebase config. In case you don't have any, create a new firebase project and use it and create a collection with the name layers in order for the code to work directly out of the box.
Describe the bug
Retrieving and accessing the data from firestore outputs the following into the terminal:
After the first request, data is retrieved, BUT everything stops working, no data can be retrieved again and the application loads a very long time. HMR stops working. Vite building doesn't work anymore and the app crashed after some reload attempts.
Additional context
Since it runs into the same issue on Stackblitz, I don't think it has to something with the environment it is executed from.
Logs
The text was updated successfully, but these errors were encountered: