Closed maxmarchionda closed 1 year ago
Can you try adding
experimental: {
esmExternals: false
}
to your next.config.js?
I spent hours debugging this. I think the issue is in rxfire
somehow picking up the CJS version which ends up with the SDK mismatching
You seem to be on to something here. I can confirm on my end that adding
experimental: {
esmExternals: false
}
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.
Interesting, I wonder if this is related to some other bundling issues we're investigating, like #488 or #489
Chatted with bundling guru @jamesdaniels about this. Conclusion:
The root cause is likely that Firestore is pulling its .proto
files from disk, and the Nextjs bundler isn't including them. The error is cryptic because the bundler is probably stripping asserts that would give a more fine-grained error message.
There are a few solutions:
esmExternals: false
will work as long as you manually include the @firebase/firestore
package yourself on the server.node_modules/@firebase/firestore/dist/src
) into your dist/src
after building..proto
files. E.g. Webpack's setting for this is require('file-loader?...')
Thanks a bunch for digging into it. Does this sound like an issue worth raising to either the Firebase or Nextjs team?
Chatted with bundling guru @jamesdaniels about this. Conclusion:
The root cause is likely that Firestore is pulling its
.proto
files from disk, and the Nextjs bundler isn't including them. The error is cryptic because the bundler is probably stripping asserts that would give a more fine-grained error message.There are a few solutions:
esmExternals: false
will work as long as you manually include the@firebase/firestore
package yourself on the server.- Manually copy over the Firestore protos (
node_modules/@firebase/firestore/dist/src
) into yourdist/src
after building.- Indicate in your bundler config to include
.proto
files. E.g. Webpack's setting for this isrequire('file-loader?...')
Option 1 doesn't seem to work for me. I tried setting the option experimental.esmExternals = false
in next.config.js
and adding a pnpm i @firebase/firestore
to the build command. Did not work.
Option 3 also didn't work. I tried adding this to next.config.js
:
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: https://github.com/firebase/firebase-js-sdk/issues/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');
throwsFirebaseError: [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.