firebase.js not compatible with module bundler using 'use strict'

[Don Barthel]

The firebase.js module makes some assumptions that are incompatible with 'use strict' (i.e. Firebase accesses the Window object through 'this').

This means that it cannot be used in a module bundler (i.e. Webpack) that uses 'use strict'.

Is there any thought to update the programming of firebase.js to remove those assumptions?

[Kato Richardson]

Hi Don,

What version? Can you produce a minimal repro?

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/27d90ad6-973b-439f-95ad-2fa3fca4c04d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Don Barthel]

Kato:

Firebase version is 2.4.0.

Yes, I have a minimal repo, download it from http://donbarthel.com/firebase_test.zip - its 49MB big because of the webpack and babel stuff but it truly is minimal otherwise.

Here my setup:

npm install -g webpack webpack-dev-server (not sure if you need this but its in my environment)

npm install --save-dev webpack-dev-server

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-polyfill

npm install --save firebase

Then from command line run 'webpack-dev-server' then point browser to localhost:8080. You'll get this error on the console:

<<

Uncaught TypeError: Cannot read property 'navigator' of undefined

(anonymous function) @ firebase-web.js:12

(anonymous function) @ firebase-web.js:3

...

>>

The issue is this code in firebase-web.js:3 :

n=this; // Assumes this === window which isn't the case in strict mode

...and in firebase-web.js:12 :

var Ga=n.navigator; // Attempt to get window's navigator object through n=='undefined'

- Don Barthel

[Kato Richardson]

Hi Don,

Tried to dig into this today and found this thread on Stack Overflow. Looks like it may answer the question?

☼, Kato

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/fd9412ae-abb7-4f11-9b61-4b0cf39449f6%40googlegroups.com.

[Don Barthel]

Kato:

I think that turning off 'use strict' for all my code in order to accommodate Firebase isn't a really good solution. It would be better that Firebase accommodate a 'use strict' scenario.

- Don Barthel

[Jacob Wenger]

Hey Don,

As that Stack Overflow post alludes to, doing linting and / or enforcing strict mode on vendor files like Firebase is generally bad practice. Also, globally enforcing strict mode is not usually ideal. I think the suggestion in that post are reasonable. Is it not working for you?

Cheers,

Jacob

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/c86dcfc5-3d38-4b29-9199-cf7970075243%40googlegroups.com.

[Don Barthel]

We should all strive to make our code 'use strict' compatible. 

If Firebase was open source then we wouldn't be having this debate.

[Jacob Wenger]

Thanks for the feedback, Don. I forwarded this on to our API team and they will take a look. They may jump on and comment on this thread as well.

Cheers,

Jacob

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/fcc90b63-adc1-4be0-a375-1e3be0e678f1%40googlegroups.com.

[Don Barthel]

OK, thanks.

[Kato Richardson]

Hi Don,

I couldn't agree more. The interesting part of the solution, in my mind, was this portion, which seemed to explain the source of the error. 

We can see what the script is trying to do now: it expects this === window so it can access window.navigator.
But why is this undefined? It's because, at some point, the script is being put into strict mode, which causes this === undefined instead of this === window. We can see that in the webpack-generated main.js:

As I read this, it's expecting this to === window that is the problem, not the use of "use strict"; maybe I've read this wrong though?

If you read this the same, it does seem like a good clue for a starting point.

☼, Kato

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/c86dcfc5-3d38-4b29-9199-cf7970075243%40googlegroups.com.

[Don Barthel]

As I read this, it's expecting this to === window that is the problem, not the use of "use strict"; maybe I've read this wrong though?

Its Firebase.js that is expecting "this === window". That's not valid 'strictly speaking'.

From https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Strict_mode:

<<

"Securing" JavaScript

...

First, the value passed as this to a function in strict mode is not forced into being an object (a.k.a. "boxed").

...

Not only is automatic boxing a performance cost, but exposing the global object in browsers is a security hazard

...

That means, among other things, that in browsers it's no longer possible to reference the window object through this inside a strict mode function.

>>

But Firebase.js is referencing the window object through 'this'.

I'm not privy to all the details. I just know that 'use strict' is good programming and that Firebase.js is preventing me from using it with Webpack/ES6.

[Keith Grennan]

Hi all,

I ran into this same problem today.

I'm using firebase-web.js inside of React Native.. it generally works great but React Native recently started using strict mode everywhere.

I get a similar error to the Stack Overflow issue mentioned previously..

undefined is not an object (evaluating 'n.navigator')

The source is minified, but I can see that n is being set to global this, which is undefined in strict mode.

With Babel 6 presets it's not (yet) practical to override plugin settings, so I'm forced to lock to an older version of babel-preset-react-native to avoid this problem.

I'd love to see this fixed.

Thanks!
Keith

[Yonah Forst]

Having the same issue as Keith. 

I just upgraded to RN 0.22.2 and firebase started throwing 

Cannot read property 'navigator' of undefined

Keith - Can you please describe how you worked around this for RN?

Cheers!

[Jacob Wenger]

Possibly relevant GitHub issue on Firebase not working with React-Native 0.22.2 here.

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/0e36e183-ea78-4be7-bd0d-2fb5bfa3660d%40googlegroups.com.

[Jacob Wenger]

Looks like that GitHub issue was relevant after all. Keith provides a workaround here. Read the full thread for context on the issue.

This issue came up due to a combination of things, some of which we don't control. However, we can and will work on making firebase.js strict mode compatible. It may be a little while since it is low pri given other things going on, but it is definitely on our radar after these few issues have come up.

Thanks everybody!

Jacob

[Keith Grennan]

Yes my workaround was:

echo node_modules/firebase/lib/firebase-web.js > .babelignore

For context see:

https://github.com/facebook/react-native/commit/36893ecfa06797a18f4ae892905101d5dec31e26#commitcomment-16820362

Best,

Keith

[Justin Reynolds]

Your workaround doesn't work for me.

[Jacob Wenger]

Hey Justin,

Pinging multiple threads with the same issue is not going to be useful here and is just making more work for everyone involved. I gave you some more pointers on the GitHub thread. Let's keep the discussion (and future discussions) in that GitHub thread.

Cheers,
Jacob

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/86a0d5c2-20a1-4770-82fe-5c3b80a12207%40googlegroups.com.

[Don Barthel]

If Justin hadn't posted here I wouldn't have known about the other issues this bug is causing.

[Jacob Wenger]

I had already referenced this same GitHub thread earlier on in this thread. I just am trying to avoid having to answer the same question across all of our support channels, which is a big time commitment for us. Sorry if it came across as curt.

If you want to follow along on GitHub, you can click the "Subscribe" button on the right-hand side of the page.

Cheers,

Jacob

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/633716a9-1521-4256-b2e2-0e3ea29850a3%40googlegroups.com.

[Don Barthel]

Following a single issue on Github isn't practical because, in this case, its a closed issue already as far as React-Native is concerned. But its still an issue here. Telling someone to follow there is passing the buck.