Firebase not working: Fetch is not defined

[permafrost06]

Describe the bug I'm trying to use firebase firestore with background.js but keep getting error saying fetch is not defined. The firebase js SDK is supposed to work in both web and node.js. In this case though, it seems firebase does not recognize that it's running on node.js and instead tries to run as it does on web. But it fails since node.js does not have web APIs such as fetch. I have tested that firebase firestore runs as intended in a standalone node.js script. I have tried putting firebase and firestore in the externals but it didn't help. (Changing some things show a different error headers is not defined in a error window)

To Reproduce

• Add electron builder to vue using vue add electron-builder
• Add firebase to the project using npm install firebase
• Initialize firebase in background.js according to the firebase docs then call a firestore function like getDoc()
• Run using npm run electron:serve
• Throws error in console fetch is not defined

Expected behavior Expect firestore to behave normally and fetch a doc from the server.

Environment (please complete the following information):

• terminal output from running vue info:

  Environment Info:
  
  System:
  OS: Windows 10 10.0.19044
  CPU: (4) x64 Intel(R) Core(TM) i5-3320M CPU @ 2.60GHz    
  Binaries:
  Node: 14.15.4 - D:\software\nodejs\node.EXE
  Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 7.15.1 - D:\software\nodejs\npm.CMD
  Browsers:
  Chrome: 97.0.4692.71
  Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.55) 
  npmPackages:
  @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
  @vue/babel-helper-vue-transform-on:  1.0.2 
  @vue/babel-plugin-jsx:  1.0.6 
  @vue/babel-plugin-transform-vue-jsx:  1.2.1 
  @vue/babel-preset-app:  4.5.13 
  @vue/babel-preset-jsx:  1.2.4 
  @vue/babel-sugar-composition-api-inject-h:  1.2.1        
  @vue/babel-sugar-composition-api-render-instance:  1.2.4 
  @vue/babel-sugar-functional-vue:  1.2.2 
  @vue/babel-sugar-inject-h:  1.2.2 
  @vue/babel-sugar-v-model:  1.2.3 
  @vue/babel-sugar-v-on:  1.2.3 
  @vue/cli-overlay:  4.5.13 
  @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 
  @vue/cli-plugin-eslint: ~4.5.0 => 4.5.13 
  @vue/cli-plugin-router: ~4.5.0 => 4.5.13 
  @vue/cli-plugin-vuex:  4.5.13 
  @vue/cli-service: ~4.5.0 => 4.5.13 
  @vue/cli-shared-utils:  4.5.13 
  @vue/compiler-core:  3.0.11 
  @vue/compiler-dom:  3.0.11 
  @vue/compiler-sfc: ^3.0.0 => 3.0.11 
  @vue/compiler-ssr:  3.0.11 
  @vue/component-compiler-utils:  3.2.0 
  @vue/devtools-api:  6.0.0-beta.21.1 
  @vue/preload-webpack-plugin:  1.1.2 
  @vue/reactivity:  3.0.11 
  @vue/runtime-core:  3.0.11
  @vue/runtime-dom:  3.0.11
  @vue/shared:  3.0.11
  @vue/web-component-wrapper:  1.3.0
  eslint-plugin-vue: ^7.10.0 => 7.10.0
  vue: ^3.0.0 => 3.0.11
  vue-cli-plugin-electron-builder: ~2.0.0 => 2.0.0
  vue-eslint-parser:  7.6.0
  vue-hot-reload-api:  2.3.4
  vue-loader:  15.9.7 (16.2.0)
  vue-router: ^4.0.0-0 => 4.0.12
  vue-style-loader:  4.1.3
  vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
  @vue/cli: Not Found

Additional context From the research I've done on this, it seems there might be an issue with webpack configuration. But addingfirebase, firebase\firestore, and firebase\firestore\lite or @firebase\firestore and @firebase\firestore\lite to vue.config.js's pluginOptions.electronBuilder.externals hasn't changed anything.

[nklayman]

Try installing the @firebase/app and @firebase/firestore packages, then set your externals to externals: ['@firebase/app', '@firebase/firestore/lite']. Then, import from those packages like so:

import { initializeApp } from "@firebase/app";
import {
   getFirestore,
   getDoc,
   updateDoc
} from '@firebase/firestore/lite';

[permafrost06]

Trying to import firestore using import { initializeFirestore } from "firebase/firestore/lite" or import { initializeFirestore } from "@firebase/firestore/lite" fails with error:

 ERROR  Failed to compile with 1 errors                                                                       1:34:57 PM

This dependency was not found:

* firebase/firestore/lite in ./src/background.js

To install it, you can run: npm install --save firebase/firestore/lite

[nklayman]

Can you share a repo that demonstrates the error? Using that import worked fine for me so I'm not sure why it won't work for you.

[permafrost06]

Check out this repo: vue-electron-firestore Running npm run electron:serve results in an error window:

[cfjohan]

I'm trying to use the compat packages using the docs on this page.

I'm getting the same error "fetch is not defined" and installing the @firebase/app and @firebase/firestore packages doesn't seem to help, I'm guessing those don't include the compat packages. Apparently @firebase/compat/app doesn't exist.

I'm curious as to why the firebase docs suggest importing from firebase/app and not @firebase/app and what the difference is?