signInAnonymously is not working as expected

[jaroslav-kubicek]

My environment

• Operating System version: 10.12.3
• Firebase SDK version: 4.2.0
• Firebase Product: auth
• Chrome 60
• Script is running in the page as extension content script

The problem

When trying to log in anonymously, promise is rejected with weird error TypeError: Cannot read property 'ac' of undefined

• I can see some successful requests in dev tools - https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo followed by https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser
• User in Firebase console is also visible

Steps to reproduce:

Relevant Code:

webpack config:

const config = {
  entry: './src/app.js',
  output: {
    filename: 'build/js/content.js',
    path: __dirname,
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Check for all js files
        loader: 'babel-loader',
        query: {
          babelrc: true,
        },
      },
    ],
  }
}

code:

import * as firebase from 'firebase';
const config = {
    apiKey: '...',
    authDomain: '...',
    databaseURL: '...',
    projectId: '...',
    storageBucket: '...',
    messagingSenderId: '...',
  };
firebase.initializeApp(config);
firebase.auth().signInAnonymously().catch((error) => console.log(error));

Error:

TypeError: Cannot read property 'ac' of undefined
    at content.js:34877
    at e.Sa (content.js:33032)
    at Ld (content.js:33092)
    at Hd (content.js:33085)
    at D.qf (content.js:33079)
    at dd (content.js:32883)
    at <anonymous>

[bojeil-google]

I can't recreate this. I am using:
Firebase SDK 4.2.0
Chrome 60.0.3112.78
webpack 3.4.1
babel-core@6.25.0
babel-loader@7.1.1

webpack.config.js:

module.exports = {
  entry: './node5.js',
  output: {
    filename: 'bundle.js',
    path: __dirname,
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Check for all js files
        loader: 'babel-loader',
        query: {
          babelrc: true,
        },
      },
    ],
  }
}

My script:

import * as firebase from 'firebase';
console.log(firebase.SDK_VERSION);
const config = {
  ...
};
firebase.initializeApp(config);
firebase.auth().signInAnonymously()
  .then(() => {console.log(firebase.auth().currentUser.uid);})
  .catch((error) => console.log(error));

Works as expected.

[jaroslav-kubicek]

I created repo with the example: https://github.com/jaroslav-kubicek/firebase-nonworking-example

[bojeil-google]

https://stackoverflow.com/questions/34973442/how-to-stop-babel-from-transpiling-this-to-undefined
Modifying .babelrc fixes this.

{
  "presets": [
    [ "es2015", { "modules": false } ]
  ]
}

Quoting: "The thing that is causing you trouble is that in an ES6 module, this is undefined, whereas in the "script" case, this varies depending on the environment, like window in a browser script or exports in CommonJS code."

[jaroslav-kubicek]

Thank you! Would be nice if lib can sustain this approach, although I expect it would require some effort... I consider this as solved for now.