This is a browser-targeted Firebase bundle... error on gatsby build

[Andrewjeska]

[                            ]   0.001 s 0/5 0% Building static HTML for pages
[2020-06-19T01:28:49.445Z]  @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

All I want to use is firebase/auth. I have this imported in gatsby-browser.js and gatsby-ssr.js as per the docs. Is there something here that I need to do to get it to work? Let me know what other details would be helpful!

[molebox]

Im seeing this too

[alexluong]

Hey @Andrewjeska, @molebox, can you try removing the import "firebase/auth" from gatsby-ssr.js?

You don't need the Firebase import lines in gatsby-ssr.js.

[Priyatham51]

@alexluong I'm seeing the same issue. Everything works with npm run develop issue is only when running npm run build

[Andrewjeska]

I've seen moved off gatsby for separate reasons, but I do remember trying it without the import in gatsby-ssr.js

I think it has to do with how it's used within your components.

[ps-feng]

I'm seeing this with npm run develop too, tried removing the import from gatsby-ssr.js but nothing changed. Using version 0.2.0-beta.4.

[molebox]

This is the fix: https://gist.github.com/jeffreymeng/78bd7f6b0f301fa5ef04359cd512222b

[alfredohzb]

I just need to use import "firebase/database" and I'm seeing this message too, what can I do?

[gristleism]

Running into this issue as well, if there isn't a current fix it would be great to see the documentation updated to warn about this problem as it's pretty frustrating to have gotten so far into development to find that following the documentation leads to errors in usage.

[Marcusg62]

I have replicated this issue on a project I'm working on. You can find the repo here. Most of the firebase stuff is in src/firebase/firebaseService.tsx

It works fine when running gatsby develop but gatsby build produces the following error.

[alexluong]

Can you try removing these lines and move them inside the function scope?

const googleProvider = new firebase.auth.GoogleAuthProvider()
const facebookProvider = new firebase.auth.FacebookAuthProvider()

const auth = firebase.auth()
const db = firebase.firestore()
const firebaseFunctions = firebase.functions()

[Marcusg62]

I'm assuming this is what you mean.

https://github.com/Marcusg62/inhouse-marketing-site/blob/7df3aa47a2e58454db5bc3623f04a408d562a089/inhouse-marketing/src/firebase/firebaseService.tsx#L97-L103

Done. I get the same error when trying to build. I've pushed to master if you'd like to take a look.

[Marcusg62]

@alexluong I recommend archiving this repo.

[theskillwithin]

Any luck on a solution for this?

[fczuardi]

This is the fix: https://gist.github.com/jeffreymeng/78bd7f6b0f301fa5ef04359cd512222b

This patch worked for me (react-firebase-hooks + gatsby-plugin-firebase using for auth only)

[suntudo]

Hey all, just wanted to post an update to this thread in case anyone else is trying to get Firebase working in production.

I highly recommend you check out how the gatsby-firebase-simple-auth starter handles this issue. Shout out to Marco Melilli for building this starter.

He uses client-only routes for the login page and protected routes with the Gatsby Plugin Create Client Path

In any case, the solution is simple to follow and was quick to integrate.