Accessing firestore within Electron app results in INTERNAL UNHANDLED ERROR when main field is set to 'main' instead of 'browser'

Question

I'm using Firebase (Auth & Firestore) in an electron desktop app built using VueJS and electron-builder. When running the application with:

module.exports = {
   configureWebpack: {
      resolve: {
         mainFields: ['browser']
      }
   }
}

I end up getting the boilerplate error from google that the Firebase install I'm using is a browser-based bundle:

Warning: This is a browser-targeted Firebase bundle but it appears it is being
      run in a Node environment.  If running in a Node environment, make sure you
      are using the bundle specified by the "main" field in package.json.
      
      If you are using Webpack, you can specify "main" as the first item in
      "resolve.mainFields":
      https://webpack.js.org/configuration/resolve/#resolvemainfields
      
      If using Rollup, use the @rollup/plugin-node-resolve plugin and specify "main"
      as the first item in "mainFields", e.g. ['main', 'module'].
      https://github.com/rollup/@rollup/plugin-node-resolve

HOWEVER, I am able to use both Auth & Firestore in this instance.

To make Firebase happy, I changed the setting to mainFields: ['main'], however, when I do that, it appears that Firestore blows up on me, although Auth now works as expected, without the browser-bundle warning:

@firebase/firestore: Firestore (8.2.5): INTERNAL UNHANDLED ERROR:  Error: Invalid package E:\Projects\project_name\node_modules\electron\dist\resources\electron.asar
    at createError (electron/js2c/asar.js:126:17)
    at Object.fs.readFileSync (electron/js2c/asar.js:545:27)
    at fetch (webpack-internal:///./node_modules/protobufjs/src/root.js:172:34)
    at Root.load (webpack-internal:///./node_modules/protobufjs/src/root.js:206:13)
    at Root.loadSync (webpack-internal:///./node_modules/protobufjs/src/root.js:247:17)
    at Object.loadSync (webpack-internal:///./node_modules/@grpc/proto-loader/build/src/index.js:223:29)
    at loadProtos (webpack-internal:///./node_modules/@firebase/firestore/dist/node-cjs/database-a420afb3-ec4c8b13.js:14877:41)
    at newConnection (webpack-internal:///./node_modules/@firebase/firestore/dist/node-cjs/database-a420afb3-ec4c8b13.js:14898:18)
    at OnlineComponentProvider.createDatastore (webpack-internal:///./node_modules/@firebase/firestore/dist/node-cjs/database-a420afb3-ec4c8b13.js:19565:26)
    at OnlineComponentProvider.eval (webpack-internal:///./node_modules/@firebase/firestore/dist/node-cjs/database-a420afb3-ec4c8b13.js:19545:47)

Any ideas on what might be happening and what I could do to get both Auth & Firestore to work at the same time, without complaining about the browser-based bundle issue?

Accessing firestore within Electron app results in INTERNAL UNHANDLED ERROR when main field is set to 'main' instead of 'browser'

0 Answers0