-
Notifications
You must be signed in to change notification settings - Fork 401
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
NextJS compatibility issues with doc(useFirestore(), 'tryreactfire', 'burrito') #491
Comments
Can you try adding
to your next.config.js? I spent hours debugging this. I think the issue is in |
You seem to be on to something here. I can confirm on my end that adding
does fix the issue. I have firebase@9.5.0, next@12.0.4, and reactfire@4.2.1 and just by adding that to the next.config.js the error does not show up anymore. |
Chatted with bundling guru @jamesdaniels about this. Conclusion: The root cause is likely that Firestore is pulling its There are a few solutions:
|
Thanks a bunch for digging into it. Does this sound like an issue worth raising to either the Firebase or Nextjs team? |
Option 1 doesn't seem to work for me. I tried setting the option Option 3 also didn't work. I tried adding this to webpack: (config, options) => {
config.module.rules.push({
test: /\.(proto)$/i,
type: 'asset/resource',
});
return config;
}, Maybe Option 2 will work? But it sounds like a huge pain... happy if someone can tell me what I might be doing wrong |
Update: this fixed the issue for me: firebase/firebase-js-sdk#5823 |
Sounds like this has been resolved. |
I was attempting to just follow the demo but there seems to be some odd behavior when using reactfire paired with any version of Firebase later than 9.1.3 and any version of NextJS v12.
Specifically the line:
const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito');
throws
FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
The issue goes away when I either
I have a feeling like this is probably an issue with firebase/nextjs, not reactfire but I figured this could be a good place to start.
Version info
firebase: "9.5.0"
next: "12.0.4"
react: "17.0.2"
reactfire: "4.2.1"
Test case
_app.jsx
Steps to reproduce
Replace sample _app.tsx with the above code in a sample app created from
yarn create next-app
Expected behavior
Expected code to run without any errors
Actual behavior
Error thrown
FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore
It seems to have some issue with the server side runtime, since I can comment out the
TestFirestoreData
component, reload the page, then uncomment theTestFirestoreData
component (performing a hot reload but not actually reloading the page) and it will work, but when I reload the page I get the above error again.The text was updated successfully, but these errors were encountered: