ReferenceError: firebase is not defined at getAll

[mediavrog]

Hi,

I know this is a dupe but I found the previous ticket answer not sufficient so I'm checking again here:

There is no documentation on how your library gets ahold of the firebase reference it uses (e.g. in src/index.js) without loading any context or module.

Is it absolutely necessary to make firebase globally available?

[szaranger]

The firebase-saga module has an external dependancy on firebase NPM package itself, where it exposes the library globally to it. So the the source code in src/index.js is not intended to use by its own.

[mediavrog]

I had both packages (firebase as well as firebase-saga) loaded in my webpack/react app but the global was not set. I could fix it by using window.firebase = getFirebaseInstance(); but that seems so hacky

[szaranger]

Can you specify which version of firebase you are using?

[mediavrog]

"firebase": "^3.6.2",
"firebase-saga": "^1.1.2",

My project is based on the react-boilerplate. If I just initialize the firebase app in the app.js without attaching it to window, the error occurs once the saga fires.

Route looks like:

{
      path: '/',
      name: 'home',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('containers/App/reducer'),
          System.import('containers/FriendsList/sagas'),
          System.import('containers/HomePage'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([reducer, sagas, component]) => {
          injectReducer('home', reducer.default);
          injectSagas(sagas.default);

          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    }

relevant saga

export function* getFriends() {
  try {
    const friends = asFirebaseArray(yield call(getAll, 'friends'));
    // const friends = [{'.key': "a", name: 'Jon'}, {'.key': "b", name: "Johanna"}];
    yield put(friendsLoaded(friends));
  } catch (err) {
    console.log(err);
  }
}

[szaranger]

Ok I can potentially see the issue is with the versions:

Can you try "firebase": "~3.2.0",

[mediavrog]

Get the same error

ReferenceError: firebase is not defined
    at getAll$ (webpack:///./~/firebase-saga/dist/ReactProxy.js?:157:22)
    at tryCatch (webpack:///./~/regenerator-runtime/runtime.js?:64:40)
    at Generator.invoke [as _invoke] (webpack:///./~/regenerator-runtime/runtime.js?:355:22)
    at Generator.prototype.(anonymous function) [as next] (webpack:///./~/regenerator-runtime/runtime.js?:116:21)
    at next (webpack:///./~/redux-saga/es/internal/proc.js?:304:27)
    at proc (webpack:///./~/redux-saga/es/internal/proc.js?:263:3)
    at resolveIterator (webpack:///./~/redux-saga/es/internal/proc.js?:442:5)
    at runCallEffect (webpack:///./~/redux-saga/es/internal/proc.js?:503:164)
    at runEffect (webpack:///./~/redux-saga/es/internal/proc.js?:427:696)
    at next (webpack:///./~/redux-saga/es/internal/proc.js?:308:9)

[szaranger]

Can you instead try adding Firebase to the index.html page:

<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>

and see if it works for you.

[mediavrog]

That worked, but it's a scenario I want to avoid with react

[szaranger]

Can you share your package config after the changes you've made? Did you get rid of the whole npm_modules before the new version change?

[mvanlonden]

Any update here @mediavrog? Running into the same issue

[mediavrog]

@mvanlonden currently sticking with the window.firebase = solution

[szaranger]

Importing Firebase as follows might potentially solve the issue:

import * as firebase from 'firebase';

[raghavendracs]

@mediavrog also using React-boilerplate and ran into same issue. Can you throw some light on how the fix for the issue you have above is coming along? Any change?

[Talhazia]

You can temporarily get a fix for it by applying. Also using react-boilerplate.

window.firebase = firebase.initializeApp(config);

[morpheism]

This works for me:

window.firebase = firebase.initializeApp(firebaseConfig)

while this alone does not:

import * as firebase from 'firebase'

[sumitbalyan]

This works for me:

1. import * as firebase from 'firebase'
2. window.firebase = firebase.initializeApp(firebaseConfig)