I am using Nuxt/Firestore in my web app. However, there was an issue in firebase sdk which created issue for firestore when using in Node. The issue is described here - https://github.com/firebase/firebase-js-sdk/issues/221
However, recently the issue has been closed, however, I still continue to face the same problem. The main issue is "Cannot find module 'grpc'" or 'firestore is not a function'.
I have created a dummy project that replicates this issue, which can be downloaded here: https://github.com/msahajwani/nuxt-firestore
To replicate the issue, follow these steps:
Download the repo and install dependencies
In ~/api/ folder, create a file called config.js and in that file add your firebase config as follows:
let config = { apiKey: 'xxx', authDomain: 'xxx', databaseURL: 'xxx', projectId: 'xxx', storageBucket: 'xxx', messagingSenderId: 'xxx' }
Run the app using npm run dev
You will notice that the app will load correctly at http://localhost:3000
The home page has a navigation bar with link to Home and Top. If you click the 'Top' link, it will load correctly. This is because it was client side render.
Now try to refresh or directly load the page http://localhost:3000/top in your browser. This will force Server Side Render and then you will see the errors. This is the problem that I have been struggling with.
Any help is greatly appreciated.