Why can't I connect Firestore to my Hydrogen app?

Technical Q&A
1

I can’t get Firebase’s firestore to connect with my Hydrogen app no matter how I seem to approach it. I have a firebase.js file exporting my db connection (I know this is wrong with remix, but I’ve been unable to find a workable solution for firebase and remix that works with the Hydrogen setup.

When I go to import my db anywhere import {db} from '~/lib/firebase';, Hydrogen sends me a stream of errors beginning with

[1] ✘ [ERROR] Could not resolve "net"
[1] 
[1]     node_modules/gaxios/node_modules/https-proxy-agent/dist/agent.js:15:38:
[1]       15 │ const net_1 = __importDefault(require("net"));

Any help would be amazing… Firebase.js looks like this:

import {getFirestore} from 'firebase-admin/firestore';
import {initializeApp} from 'firebase/app';

const firebaseConfig = {
  apiKey: 'xxxxxxx',
  authDomain: 'xxxxx',
  projectId: 'xxxxx',
  storageBucket: 'xxxx',
  messagingSenderId: 'xxxx',
  appId: 'xxxxx',
  measurementId: 'xxxxx',
};

const app = initializeApp(firebaseConfig);
// Export firestore database
// It will be imported into your react app whenever it is needed
export const db = getFirestore(app);
2

You can’t use firebase-admin in Oxygen because it doesn’t support nodejs. You could try adding polyfills to the remix config, but I’m not sure it would work completely.

https://remix.run/docs/en/main/file-conventions/remix-config#servernodebuiltinspolyfill