Usage with Electron: Firebase warning and nothing inside `<User />` will render

[jhwheeler]

I'm integrating sveltefire into a project based off of your Svelte/Electron template (which is awesome, by the way!). However, when I initialize Firebase, I get the following warning:

@firebase/app: 
      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

This isn't an issue until I add in the <User /> component; at that point, nothing wrapped inside it will render. Interestingly enough, this doesn't seem to happen when just wrapping my app with <FirebaseApp />.

When I add mainFields: ['main', 'module'] to the resolve object in rollup.config.js (also recommended by the installation guide to resolve another issue with idb), it doesn't seem to have any effect here. My Rollup config is otherwise the same as what is found in the Svelte/Electron template linked above. I also tried adding a browser field to package.json, with a value of src/svelte.js, with no effect.

According to Using Firebase with Electron by the Firebase team on Medium, "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." If I understand it correctly, that's what I tried to do by setting mainFields and having browser: true in the Rollup config.

I also tried importing the Firebase SDKs via script tags in index.html instead of installing them as Node modules and importing in App.svelte, but again to no avail.

I found an issue on the Angular Fire repository, which is still open but does have a working solution for Webpack (adding externals: ['firebase'] to Webpack config fixed it for some people), but not for Rollup. Not sure how to "translate" that solution to Rollup; there is an external field for Rollup, but it doesn't seem to work the same way.

Any help on this would be greatly appreciated! And thank you once again for making these two amazing packages.

[lordjoo]

Same issue here

[omar-alsadi]

Hi @jhwheeler ,

I've faced this issue before when I tried to run gatsby build. I know you were confused because your code is still working well on the development environment but when building your project for production, Gatsby creates static files which are built on a machine. This build environment has no access to the window object. The Firebase Web SDK is not server friendly, and assumes its environment always has access to the window because of that you got errors when you try build the project!

you can read more and find the solution on this blog:

https://invertase.io/blog/firebase-with-gatsby

Thanks for Elliot Hesp!