Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

js minify breaks polymerfire #2420

Open
christophe-g opened this issue Apr 27, 2017 · 29 comments
Open

js minify breaks polymerfire #2420

christophe-g opened this issue Apr 27, 2017 · 29 comments

Comments

@christophe-g
Copy link
Contributor

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 Polymer/polymer-cli#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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor

Looks like we have a fix here: Polymer/polymer-cli#698

@christophe-g
Copy link
Contributor Author

@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
Copy link

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
Copy link

khammami commented May 14, 2017

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
Copy link

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
Copy link
Contributor Author

@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
Copy link

rbellens commented Jun 9, 2017

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 babel/minify#574

@andersforsell
Copy link

andersforsell commented Jun 9, 2017

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
Copy link

andersforsell commented Jun 9, 2017

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
Copy link

hyyan commented Jun 13, 2017

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

@eob
Copy link

eob commented Jun 27, 2017

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
Copy link

Royedc4 commented Jul 16, 2017

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
Copy link

Seeing this on v1.3.1 as well.

@aswerdlow935
Copy link

Update?

@georlitz
Copy link

georlitz commented Aug 7, 2017

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
Copy link

aswerdlow935 commented Aug 8, 2017

@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
Copy link
Contributor Author

christophe-g commented Aug 8, 2017

@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
Copy link

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
Copy link

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
Copy link

howking commented Aug 30, 2017

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
Copy link
Contributor Author

There is now a PR for skipping minification of problematic js files: Polymer/polymer-cli#878

@ernsheong
Copy link

ernsheong commented Oct 11, 2017

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
Copy link

cinmay commented Oct 21, 2017

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
#2.2.0
firebase#4.6.0

@FredKSchott FredKSchott removed their assignment Mar 29, 2018
@FluorescentHallucinogen
Copy link
Contributor

Is it fixed?

@iSuslov
Copy link

iSuslov commented Jan 8, 2019

Not fixed
#279
#601
#2601

@stale
Copy link

stale bot commented Mar 3, 2020

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.

@stale stale bot added the wontfix label Mar 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests