Uncaught FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore[BUG] title

[filmerjarred]

Using the latest version with the example code, I'm seeing this:

narrowed it down to this minified code in the firebase module

which I'm pretty sure this this

I think something weird is going on with the classes, and the firestore instance that firelord lib ends up with isn't registering as the same class that the firestore lib has.

Have this library been used on the frontend before?

[tylim88]

may I know which line error?

was it line 33 setDoc?

I tested it on codesandbox and I cannot reproduce the error (replace your-projedct-id and set your rule)

can you share a repo or codesandbox?

also may I know what firebase version you are using? I assume firelordjs is 2.2.5

[miro-ku]

Got the same error, seems that the problem is in [email protected], works fine with [email protected]

[tylim88]

Guys, I am not able to reproduce the error with [email protected] (the codesandbox use 9.17.1, all my tests also passed), I need a repo that can reproduce the error

[filmerjarred]

Thanks for the reply, here's a demo repo https://github.com/filmerjarred/firelord-react-issue/blob/main/src/App.tsx

Also note, I fixed a different error "could not find service firestore" by adding the second line import "firebase/firestore"

I think the issue is related to the bundling / magic that goes on with imports, and why it works in codepen is because they do bundling in a different way. If you pull that repo, npm install and then run start it should reproduce the error

[tylim88]

I saw the error now

did you see the error every time you use firebase with react-script v5?

[tylim88]

please use react script v4.0.3

my guess is this is related to webpack v5

as far as I know react script v5 use webpack v5, and webpack v5 does not fill nodejs module for you

some(many) client side library use nodejs module, so webpack v5 break a lot of thing

(FirelordJS does not depend on any node modules)

I recommend you use react script v4.0.3 or switch to react vite to make your life easier

react scripts v5.0.1 also has issues like this and this

[tylim88]

I will close this issue in few more hours (I don't want it exceed 24 hours)

Please try react-script v4.0.3 and let me know (I tried, it works)

it will also remove the need to import firestore service as global variable, so you can remove the 2nd line import

[tylim88]

hmm, interesting, v5.0.1 works with firebase without any issue

something is indeed wrong with firelord

[tylim88]

currently this is my understanding:

1. this is not about filling node module, because react-scripts can run firebase fine
2. most likely this is bundling issue as you said, webpack somehow alter firelordjs firestore instance
3. I triple checked my code and pretty sure I did not alter the firestore instance by any mean, firelordjs simply passing the instance around

I decided not to troubleshoot anymore as I think this is a waste of time(it is very difficult to troubleshoot with react-script 5.0.1)

If you want to use firelordjs in existing project, simply downgrade react-scripts to v4.0.3
If you want to use firelordjs in new project, please use vite react

react-scripts is no longer a good tool, with a lot of frustrations and 0 update in the last 10 months

I will close this issue, if both solutions do not work for you, open new issue

If you want to reach me faster, you can find me in the discord (link in documentation)

[miro-ku]

My issue is not related to react-script, since I use vue3, nuxt3 and vite as builder. And firelordjs works fine with [email protected]. I'll do reproduction repo later, don't have time now

[tylim88]

it seem like firebase 9.16 does work with react scripts v5.0.1

and we can also see the same error in react vite

so the problem lie in what had changed in firebase 9.17.l

[tylim88]

After some troubleshooting I finally understand what is happening

first when we try to google Uncaught FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore[BUG] title, this is the first thing that come up: https://stackoverflow.com/a/69048162/5338829

second when we try to search Expected first argument to collection() in the sdk codebase, this is what we got

This error message only exist in lite api

it appears that require import code from firestore-lite(because firelord compile to commonjs), and import import code from firestore

which mean the firestore instance is ok(because it is imported by import, but not the case for the rest of the methods, because they are imported by require after compilation)

[tylim88]

@ArStah @filmerjarred

please try v2.2.6, release note

work with vite and react-script v5.0.1, firebase 9.17.1

[miro-ku]

My issue is resolved. Thanks!