js minify breaks polymerfire

[christophe-g]

Description

building with "js": { "minify": true } breaks polymerfire. Cannot read the database anymore and get error messages like: FIREBASE INTERNAL ERROR: Server Error: ClientId[7309775]:ErrorId[966]: Error on incoming message.

Just replacing the files in build/min/bower_components/firebase/ by original files (firebase-app.js, firebase-database.js, firebas-auth.js ... which are already minified) makes the app work again.

As an - unsuccessful - workaround, I tried to upgrade babel-preset-babili to the latest version (0.0.12), and unset all babel-preset-options ({boolean: false, buildIn, false, ...} as in https://github.com/Polymer/polymer-cli/pull/698).

Is there a way to prevent some files to be minified during the build process?

Versions & Environment

• Polymer CLI: 0.18.1
• node: 6.10.1
• Operating System: Linux

[christophe-g]

Additional info:

• the FIREBASE INTERNAL ERROR only appears if the user is logged-in to firebase.
• Only bower_components/firebase/firebase-database.js is not behaving as expected in the minified version

C

[christophe-g]

workaround (ugly!): add smth that breaks babili at the top of a file that should not be minified

For example adding the snippet below at the top of firebase-database.js makes my minified app work again (the build will complain with warn: .js: Unable to optimize /home/christophe/Programming/Polymer/preignition/bower_components/firebase/firebase-database.js { err: 'unknown: Invalid regular expression: /^([A-Za-z0-9_-.])+@$/: Range out of order in character class' } ) and this file will not be minified.

(function(){
new RegExp("^([A-Za-z0-9_\-\.])+\@$");
})

Interested in better ways to do this of course ... C.

[FredKSchott]

Ugh, this is probably related to https://github.com/Polymer/polymer-cli/issues/689.

We've talked about adding a configurable "skip optimization" option, but atm our effort may be better spent on fixing the minify bug in babili for everyone.

[FredKSchott]

Looks like we have a fix here: https://github.com/Polymer/polymer-cli/pull/698

[christophe-g]

@FredKSchott that would be too easy, The fix #698 does not work here - something else seem to be happening. I did not have time to trace down this issue and find the root cause.

Good luck ! C.

[gdevacc12]

I also found --js-minify breaks the polymerfire in the build process. Error reported when firebase-auth called: Uncaught TypeError: Cannot read property 'signInWithEmailAndPassword' of undefined at HTMLElement.signInWithEmailAndPassword (firebase-auth.html:1) at HTMLElement.signIn (my-app.html:1) at HTMLElement.S (polymer.html:1) at HTMLElement.fire (polymer.html:1) at HTMLElement.signIn (pd-login.html:1) at HTMLElement.S (polymer.html:1) at HTMLElement.fire (polymer.html:1) at Object.fire (polymer.html:1) at Object.forward (polymer.html:1) at Object.click (polymer.html:1) I copied in ./bower_components/polymer/polymer.html to ./build/default/bower_components/polymer and the app works OK. Something breaks in minimising polymer.html? polymer cli 0.18.1 polymer 1.9.1 polymerfire 0.10.4 (version required by polymer-cli)

[khammami]

Fixed with the latest update 0.18.3

this issue still persist. Just copy JS file that your project need and replace minified Firebase files in your build as workaround (not fancy) for unbundled builds. Otherwise use polymer-build for custom configuration and exclude Firebase from being re minified

[Guild-Master]

I'm curious on the status of this issue because it appears that the minification of polymerfire causes Firebase Cloud Messaging calls (using curl) to return:

{"multicast_id":5746259717406816060,"success":0,"failure":1,"canonical_ids":0,"results":[{"error":"InvalidParameters"}]}

But if we turn off minification when we do a "polymer build", everything works fine.

[christophe-g]

@Guild-Master. Issue is still hitting my build process under v1.1.0. bower_components/firebase/firebase-database.js is being re-minified and stops behaving as expected.

[rbellens]

With v1.1.0, I get Cannot read property 'length' of undefined exceptions. Seems to do with the dead code elimination of babili, when turned off, the exceptions go away. See also https://github.com/babel/babili/issues/574

[andersforsell]

I also see this problem with polymer cli v1.1.0 and after updating to polymerfire v2.1.0

firebase-auth.js:1 Uncaught TypeError: Cannot read property 'length' of undefined at Ss.o.dispatchEvent (firebase-auth.js:1) at _s (firebase-auth.js:1) at Ss.ne (firebase-auth.js:1) at Ss.send (firebase-auth.js:1) at _l.Mf (firebase-auth.js:1) at Wl (firebase-auth.js:1) at firebase-auth.js:1 at new ur (firebase-auth.js:1) at ql (firebase-auth.js:1) at firebase-auth.js:1

[andersforsell]

Even though this is a problem with the minifier, wouldn't it be good to be able to not minify certain scripts, especially when you have 3rd party redistributable scripts with a version and a license like in the Firebase scripts?

[hyyan]

Same With v1.2.0, I get Cannot read property 'length' of undefined exceptions. Any clean solution other than @christophe-g solution ?!

[eob]

Also getting this error on v1.2.0 -- just brought our production build to a halt.

firebase-auth.js:1 Uncaught TypeError: Cannot read property 'length' of undefined

@christophe-g's fix doesn't seem to work for us, nor does building with the following flags:

      "js": {"minify": false},
      "css": {"minify": false},
      "html": {"minify": false}

Which is odd, because I thought this problem was related to minification.

[Royedc4]

firebase-auth.js:1 Uncaught TypeError: Cannot read property 'length' of undefined

Hey @eob In my case it was the HTML minification. Maybe this is a mix of other problems.

[ralphsmith80]

Seeing this on v1.3.1 as well.

[aswerdlow935]

Update?

[georlitz]

I was getting the Cannot read property 'length' of undefined when deployed (trying to use signInWithEmailAndPassword()), and @christophe-g's original fix of replacing the built firebase files with the source worked for me.

[aswerdlow935]

@christophe-g's suggestion gave me an error "Invalid Regular Expression" in the console, and then a firebase.auth is not a function error, probably because of the first error. Is there another recommended way to fix this? Turning off JS minify seems like a poor solution.

[christophe-g]

@aswerdlow935 "Invalid Regular Expression" should appear as a warning in the build process - see earlier post - I don't think the two errors are linked. What this temp and ugly workaround does is just to create an error in Babili so that it does not re-minify the original file, and instead, stream it without changes.

Maybe try to also add same invalid regex on top of firebase-auth.js.

[homerjonathan]

I am getting the same error using "google" as the provider of security.

Here is the authentication code I am using.

          this.$.auth.signInWithPopup()
              .then(function(response){
                console.log(response);
              })
              .catch(function(error) {
                console.log(error);
              });

I get the same error report with Uncaught TypeError: Cannot read property 'length' of undefined

Interestingly I get a blank sign-up box as well.

[garcianavalon]

I am getting exactly the same error as @homerjonathan when trying to log in with Google using polymerfire after building with es5-bundled presets

Uncaught TypeError: Cannot read property 'length' of undefined
    at Us.o.dispatchEvent (my-app.html:16)
    at Hs (my-app.html:16)
    at Us.Ke (my-app.html:16)
    at Us.send (my-app.html:16)
    at Yl.qg (my-app.html:16)
    at tu (my-app.html:16)
    at my-app.html:16
    at new Ir (my-app.html:16)
    at ru (my-app.html:16)
    at my-app.html:16

[howking]

This is my temporary fix... to [install_dir]/polymer-cli/lib/build/optimize-streams.js (e.g. /usr/local/lib/node_modules/polymer-cli/lib/build/optimize-streams.js)

--- optimize-streams.js.orig    2017-08-30 17:40:02.654992031 +0900
+++ optimize-streams.js 2017-08-30 17:43:42.132991921 +0900
@@ -50,6 +50,13 @@
             return;
         }

+        if(/firebase-auth\.js$/.test(file.path) &&
+           this.optimizerOptions.presets[0].minified == true){
+            logger.warn('skip minify `firebase-auth.js` ...');
+            callback(null, file);
+            return;
+        }
+        
         if (file.contents) {
             try {
                 let contents = file.contents.toString();

[christophe-g]

There is now a PR for skipping minification of problematic js files: https://github.com/Polymer/polymer-cli/pull/878

[ernsheong]

My workaround is to skip polymerfire entirely:

...
  <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase-auth.js"></script>

  <body>
  <dom-module id="my-root">
    <template>
      <my-app user="[[user]]"></my-app>
    </template>
    <script>
      firebase.initializeApp({
        // ... YOUR CONFIG
      });

      window.addEventListener("WebComponentsReady", function() {
        class MyRoot extends Polymer.Element {
          static get is() {return "my-root";}
          static get properties() {
            return {
              user: Object,
            };
          }

          ready() {
            super.ready();

            firebase.auth().onIdTokenChanged((user) => {
              if (user) {
                this.user = user;
              } else {
                this.user = null;
              }
            });
          }
        }
        window.customElements.define(MyRoot.is, MyRoot);
      });
    </script>
  </dom-module>

  <my-root></my-root>
</body>

[cinmay]

I'm having the same problem. I used the fix suggested in the first post

cp bower_components/firebase/firebase-auth.js build/es6-unbundled/bower_components/firebase/

Everything was updated and tested with the newest versions: polymer-cli@1.5.7 firebase-tools@3.13.1 npm@5.5.1 nodejs -v v6.11.4 polymerfire#2.2.1 polymer#2.2.0 firebase#4.6.0

[FluorescentHallucinogen]

Is it fixed?

[iSuslov]

Not fixed https://github.com/Polymer/tools/issues/279 https://github.com/Polymer/tools/issues/601 https://github.com/Polymer/tools/issues/2601

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.