framework
framework copied to clipboard
nuxt
Firebase - Could not reach Cloud Firestore backend
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)
- Operating System:
Linux - Node Version:
v16.16.0 - Nuxt Version:
3.0.0-rc.6 - Package Manager:
[email protected] - Builder:
vite - User Config:
css,modules,content - Runtime Modules:
@nuxt/[email protected] - Build Modules:
-
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:
[nitro] [dev] [unhandledRejection] TypeError: a.body.getReader is not a function
at k.Va (file:///home/projects/github-kzwv1p/.nuxt/dist/server/server.mjs:26618:368)
[2022-08-16T19:32:24.127Z] @firebase/firestore: Firestore (9.9.2): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
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
WARN Sourcemap for "/home/projects/github-kzwv1p/node_modules/@firebase/util/dist/node-esm/index.node.esm.js" points to missing source files
✔ Vite server built in 3356ms 21:37:43
✔ Nitro built in 796 ms nitro 21:37:44
[nitro] [dev] [unhandledRejection] TypeError: a.body.getReader is not a function
at k.Va (file:///home/projects/github-kzwv1p/.nuxt/dist/server/server.mjs:26618:368)
ℹ Vite client warmed up in 9040ms 21:37:46
[2022-08-16T19:37:55.851Z] @firebase/firestore: Firestore (9.9.2): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
[2022-08-16T19:38:30.861Z] @firebase/firestore: Firestore (9.9.2): Connection WebChannel transport errored: Vd {
type: 'c',
target: <ref *1> Y {
s: false,
o: undefined,
i: $a { src: [Circular *1], g: [Object], h: 4 },
P: [Circular *1],
I: null,
g: Id {
za: 0,
l: [Array],
h: [Mb],
s: null,
P: [Object],
o: '$httpHeaders',
aa: [Object],
D: 'gsessionid',
sa: null,
g: null,
W: 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel',
F: [U],
oa: null,
la: null,
V: 31449,
Za: 4,
Xa: false,
j: [Z],
m: null,
u: null,
v: null,
N: true,
X: true,
U: -1,
ta: -1,
I: -1,
C: 0,
A: 0,
Y: 0,
Pa: 5000,
'$a': 10000,
Ya: 2,
ra: 600000,
qa: [pd],
Ba: false,
K: undefined,
H: true,
J: '',
i: [gd],
Ca: [ld],
ja: false,
Ra: false,
'$': false,
ka: undefined,
O: 0,
L: false,
B: null,
Wa: true,
G: 0
},
l: 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel',
h: { database: 'projects//databases/(default)' },
A: true,
v: true,
j: Z { g: [Circular *1] }
},
g: <ref *1> Y {
s: false,
o: undefined,
i: $a { src: [Circular *1], g: [Object], h: 4 },
P: [Circular *1],
I: null,
g: Id {
za: 0,
l: [Array],
h: [Mb],
s: null,
P: [Object],
o: '$httpHeaders',
aa: [Object],
D: 'gsessionid',
sa: null,
g: null,
W: 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel',
F: [U],
oa: null,
la: null,
V: 31449,
Za: 4,
Xa: false,
j: [Z],
m: null,
u: null,
v: null,
N: true,
X: true,
U: -1,
ta: -1,
I: -1,
C: 0,
A: 0,
Y: 0,
Pa: 5000,
'$a': 10000,
Ya: 2,
ra: 600000,
qa: [pd],
Ba: false,
K: undefined,
H: true,
J: '',
i: [gd],
Ca: [ld],
ja: false,
Ra: false,
'$': false,
ka: undefined,
O: 0,
L: false,
B: null,
Wa: true,
G: 0
},
l: 'https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel',
h: { database: 'projects//databases/(default)' },
A: true,
v: true,
j: Z { g: [Circular *1] }
},
defaultPrevented: false,
status: 1
}
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: https://github.com/nuxt/framework/issues/3294
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 #3294 are caused by unintened module resolution. (see: https://github.com/nuxt/framework/issues/3294#issuecomment-1044173404)
- If we try to use firebase/auth module on SSR dev mode, we will get error mentioned at #3294
- If we try to use firebase/firestore module on SSR dev mode we will get error described in this issue
Similaly, some other firebase modules does not work on SSR dev mode. I'm not sure if all of them have the same root cause, but anyway we should resolve the module resolution issue first.
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 connectAuthEmulator() and connectFirestoreEmulator() functions. The mistake I made was assuming the parameters for both of these functions were the same (because they look like they ought to be). connectAuthEmulator() requests a url and connectFirestoreEmulator() requests a host. In other words, make sure your connectFirestoreEmulator() doesn't have a "http://" on the front of it.
