Resolve firebase authentication (google signIn) deploy error on netlify with gatsby

Question

Thank you It worked I am pushing my code. You can use it as a reference.

I am using firebase for my project to add google sign in in gatsby.
Locally it works fine but I can't seem to deploy it on netlify.

My Git Repo

I have used gatsby-firebase-plugin but it gives me an error

Warning: This is a browser-targeted Firebase bundle but it appears it is being
12:19:15 AM: run in a Node environment. If running in a Node environment, make sure you
12:19:15 AM: are using the bundle specified by the “main” field in package.json.
12:19:15 AM: If you are using Webpack, you can specify “main” as the first item in
12:19:15 AM: “resolve.mainFields”:
12:19:15 AM: Resolve | webpack
12:19:15 AM: If using Rollup, use the @rollup/plugin-node-resolve plugin and specify “main”
12:19:15 AM: as the first item in “mainFields”, e.g. [‘main’, ‘module’].
12:19:15 AM: https://github.com/rollup/@rollup/plugin-node-resolve
12:19:15 AM: failed Building static HTML for pages - 0.624s
12:19:15 AM: error Building static HTML failed
12:19:15 AM:
12:19:15 AM:
12:19:15 AM: TypeError: Cannot read property ‘split’ of null

Even if I use separate file for firebase like

import firebase from 'firebase';

const firebaseConfig = {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID
  };

  firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

export const provider = new firebase.auth.GoogleAuthProvider();

I get this error

failed Building static HTML for pages - 0.823s
10:21:12 AM: error Building static HTML failed
10:21:12 AM: 
10:21:12 AM:   663 |  * limitations under the License.
10:21:12 AM:   664 |  */
10:21:12 AM: > 665 | registerFunctions(firebase, fetch.bind(self));
10:21:12 AM:       |                           ^
10:21:12 AM:   666 | firebase.registerVersion(name, version);
10:21:12 AM:   667 | //# sourceMappingURL=index.esm.js.map
10:21:12 AM:   668 |
10:21:12 AM: 
10:21:12 AM:   WebpackError: ReferenceError: fetch is not defined

I added GATSBY_ prefix before env variables

I also added environment variables in netlify environment

After adding null to avoid SSR breaking I am getting this error.

The problem may be with the code ' WebpackError: ReferenceError: fetch is not defined'. have you imported fetch, or maybe you aren't using it as a global variable. — Joel Company, Apr 19 '21 at 06:35
also, i dont see a reason to use firebase unless you're making a userbase. anyways, Check the code, see where 'fetch' is defined. It may be a package that hasn't been imported, or a local variable, make it a global one if so — Joel Company, Apr 19 '21 at 06:37
wherever you are calling registerFunctions(firebase, fetch.bind(self)) , in that file use it at the top — Joel Company, Apr 19 '21 at 07:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231301/discussion-between-joel-company-and-ahmed-abid). — Joel Company, Apr 19 '21 at 07:18

Ferran Buireu · Accepted Answer · 2021-04-19T14:19:59.387

You need to upload your environment variables to Netlify. In addition (and if you've done it), you will need to rename it to make it accessible to Netlify.

Accessible at: https://app.netlify.com/sites/YOUR_PROJECT_NAME/settings/deploys#environment

As I said, your project works perfectly locally but Netlify doesn't have access (yet) to those variables if you just upload it with the same naming. As you can see in Netlify's docs about Gatsby:

Any environment variables prefixed with GATSBY_ are processed by Gatsby and made available in the browser for client-side JavaScript access. Visit the Gatsby docs about environment variables for more information.

You need to prefix all environment variables with GATSBY_ to make them available. So all your references will became:

const firebaseConfig = {
    apiKey: process.env.GATSBY_API_KEY,
    authDomain: process.env.GATSBY_AUTH_DOMAIN,
    projectId: process.env.GATSBY_PROJECT_ID,
    storageBucket: process.env.GATSBY_STORAGE_BUCKET,
    messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID,
    appId: process.env.GATSBY_APP_ID
  };

Hence the environment files itself, both (.env.development and .env.production) will become:

GATSBY_API_KEY = 123
GATSBY_AUTH_DOMAIN = 123
GATSBY_PROJECT_ID = 123
GATSBY_STORAGE_BUCKET = 123
GATSBY_MESSAGING_SENDER_ID = 123
GATSBY_APP_ID = 123

Now, Netlify will have access to your Firebase initialization and won't break the deployment.

Summarizing:

Upload environment variables to Netlify with GATSBY_ prefix
Change all references to the previous environment variables. All variables you want to be readable by Netlify must be prefixed.

In addition, add the following snippet in the gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /firebase/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

Source: https://github.com/gatsbyjs/gatsby/issues/29012

This will add a null loader to the firebase to avoid the SSR breaking.

Regarding the new issue:

gatsby_plugin_firebase__WEBPACK_IMPORTED_MODULE_4___ default(...).auth

It should be fixed by:

import firebase from '@firebase/app';
import '@firebase/auth';
import '@firebase/firestore';
import '@firebase/functions';

const config = {
   ... firebase config here
};

let instance;

export default function getFirebase() {
  if (typeof window !== 'undefined') {
    if (instance) return instance;
    instance = firebase.initializeApp(config);
    return instance;
  }

  return null;
}

Then, you just can:

import React { useEffect } from 'react';
import getFirebase from './firebase';

function MyApp() {
const firebase = getFirebase();

useEffect(() => {
if (!firebase) return;

// once your firebase is instanced, use it.
firebase.auth().onAuthStateChanged((user) => { ... });
}, [firebase]);
}

Can you detail more about your answer? What have you tried? Have you cleaned the cache? Does it still build locally? As you can see in the documentation, the solution is this one. Renaming the environment variables to make them available by Netlify. — Ferran Buireu, Apr 19 '21 at 06:23
I've added a new snippet based on https://github.com/gatsbyjs/gatsby/issues/29012 to avoid SSR breaking. The previous configurations needs to be kept (what we've done so far) — Ferran Buireu, Apr 19 '21 at 06:36
Have you checked https://stackoverflow.com/questions/48592656/firebase-auth-is-not-a-function ? and https://stackoverflow.com/questions/58246333/how-to-initialize-firebase-in-gatsby — Ferran Buireu, Apr 19 '21 at 06:51
`if (!firebase) return;` wrap your logic when firebase is initalized — Ferran Buireu, Apr 19 '21 at 14:16
thanks it worked. I just had to access the first element of firebase object — Ahmed Abid, Apr 19 '21 at 14:35

Resolve firebase authentication (google signIn) deploy error on netlify with gatsby

1 Answers1