I'm trying to get firebase firestore to work in electron. Firebase is initialized fine but when I try to run firestore, it says:
Error adding document: ReferenceError: fetch is not defined
at e (webpack:///./node_modules/@firebase/firestore/dist/lite/index.browser.esm2017.js?:3242:30)
at nn (webpack:///./node_modules/@firebase/firestore/dist/lite/index.browser.esm2017.js?:3243:10)
.
.
.
at __webpack_require__ (D:\Desktop\Projects\casedb\dist_electron\index.js:20:30)
I'm pretty sure that's happening because firestore is thinking it's running on the web and has access to fetch while it's actually running on node.js.
Now, I'm not sure what to do to make this work. I'm using a vue-cli plugin to use electron with vue. I've gone through their documentation and tried the following.
- Added firebase and firestore as a native dependency
- Tried running my test script in a normal node.js environment
- Tried using require instead of import
None of these have worked so far. From what I can gather by googling for 8 hours, it probably has something to do with webpack. But I can't figure out what to do.
Here is my vue.config.js which configures the cli plugin:
module.exports = {
pluginOptions: {
electronBuilder: {
externals: [
"pouchdb-node",
"firebase",
"firebase/firestore",
"firebase/firestore/lite",
"firestore",
],
preload: "src/preload.js",
nodeIntegration: true,
builderOptions: {
nsis: {
oneClick: false,
createDesktopShortcut: true,
perMachine: true,
},
},
},
},
};
Here is my firebase test script just in case:
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore/lite";
import { collection, addDoc } from "firebase/firestore/lite";
const firebaseConfig = {
apiKey: "AIzaSyCwzmIhPhUxB7uFsCHlWhARTiSzMylDn0A",
// authDomain: "casedb-29442120.firebaseapp.com",
projectId: "casedb-29442120",
storageBucket: "casedb-29442120.appspot.com",
messagingSenderId: "354561150712",
appId: "1:354561150712:web:3db5b0d737be49a90bf50d",
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore();
export const syncWithDB = async () => {
try {
const docRef = await addDoc(collection(db, "records"), {
first: "Ada",
last: "Lovelace",
born: 1815,
});
console.log("Document written with ID: ", docRef.id);
} catch (e) {
console.error("Error adding document: ", e);
}
};