Quassar and Electron with firebase

[chidozie]

Hello everyone, sorry to ask this question but i am a total noob in vue.js (although i have been reading and practicing the vue.js documentation and its pretty awesome) and i have been wondering if its possible to use Quassar framework with Firebase and also is it possible to use Electron with Firebase as well… Thanks in advance for your response.

[benoitranque]

Yes

Using Firebase with Quasar should not be any different than with any other web app

[jhb]

Has anyone else run into this:

When I run Quasar dev -m electron my firebase data is not being read.
In the dev tools console there is a message:

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

I checked the webpack link above and it references an entry in webpack.config.js

module.exports = {
//…
resolve: {
mainFields: [‘browser’, ‘module’, ‘main’]
}
};

I found the webpack.config.js in an obscure folder referencing css optimization, didn’t seem a likely solution.

I also found a github issue that sounds like angular/angularfire users are having the same problem. It’s still an open issue.

Firebase is working in the normal quasar dev, so I don’t think it’s my app tha’s causing the issue.

Thank You for any help

[jhb]

In Stack Overflow there’s a similar question for the same error:

https://stackoverflow.com/questions/60954892/firebase-with-node-browser-targeted-firebase-bundle

But in this case the OP was actually developing a node server-side application. The answer was to use the firebase admin SDK instead.

So is it possible firebsase somehow sees electron as a server-side application in node?

[jhb]

This seems to be the go-to reference for others trying to solve this problem:

https://medium.com/firebase-developers/using-firebase-in-electron-tips-and-tricks-24ac5b44bf5a

In the reference it says:

Solution 1: Using a Bundler
If your project uses a bundler, the project’s bundler config determines which of these Firebase bundles gets bundled into the final files. Setting the bundler’s config to prioritize the browser field over main will ensure the browser version of Firebase gets into your bundle, and Firebase will behave as if in a browser environment.

Consult your specific bundler’s documentation on how to set the priority of these fields.

Anyone know how I would accomplish this in Quasar?