Open mediavrog opened 7 years ago
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.
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
Can you specify which version of firebase you are using?
"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);
}
}
Ok I can potentially see the issue is with the versions:
Can you try
"firebase": "~3.2.0",
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)
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.
That worked, but it's a scenario I want to avoid with react
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?
Any update here @mediavrog? Running into the same issue
@mvanlonden currently sticking with the window.firebase =
solution
Importing Firebase as follows might potentially solve the issue:
import * as firebase from 'firebase';
@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?
You can temporarily get a fix for it by applying. Also using react-boilerplate.
window.firebase = firebase.initializeApp(config);
This works for me:
window.firebase = firebase.initializeApp(firebaseConfig)
while this alone does not:
import * as firebase from 'firebase'
This works for me:
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?