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

babel minify output has mysterious/broken output for this example #1044

Open
codefactor opened this issue Dec 9, 2022 · 1 comment
Open

Comments

@codefactor
Copy link

codefactor commented Dec 9, 2022

Describe the bug

Some minified JS code is not functionally equivalent to original, and it produces runtime errors when the minified code is executed. Some extra unexpected string variable is injected into the minified JS code and then later that variable is used as a function which throws.

To Reproduce

Minimal code to reproduce the bug

Using package.json like this:

{
  "name": "babel-issue",
  "version": "1.0.0",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-minify": "^0.5.2",
    "ts-node": "^10.9.1"
  }
}

Execute code like this:

const content = `(function() {
  var e = YAHOO.util, k = YAHOO.lang, L = YAHOO.env.ua, a = YAHOO.lang.trim, B = {}, F = {}, m = /^t(?:able|d|h)$/i, w = /color$/i, j = window.document, v = j.documentElement, C = "ownerDocument", M = "defaultView", U = "documentElement", S = "compatMode", z = "offsetLeft", o = "offsetTop", T = "offsetParent", x = "parentNode", K = "nodeType", c = "tagName", n = "scrollLeft", H = "scrollTop", p = "getBoundingClientRect", V = "getComputedStyle", y = "currentStyle", l = "CSS1Compat", A = "BackCompat", E = "class", f = "className", i = "", b = " ", R = "(?:^|\\s)", J = "(?= |$)", t = "g", O = "position", D = "fixed", u = "relative", I = "left", N = "top", Q = "medium", P = "borderLeftWidth", q = "borderTopWidth", d = L.opera, h = L.webkit, g = L.gecko, s = L.ie;
  e.Dom = {
      _getXY: function(W) {
          var X, G, Z, ab, Y, aa, ac = Math.round, ad = false;
          if (e.Dom._canPosition(W)) {
              Z = W[p]();
              ab = W[C];
              X = e.Dom.getDocumentScrollLeft(ab);
              G = e.Dom.getDocumentScrollTop(ab);
              ad = [Z[I], Z[N]];
              if (Y || aa) {
                  ad[0] -= aa;
                  ad[1] -= Y;
              }
              if ((G || X)) {
                  ad[0] += X;
                  ad[1] += G;
              }
              ad[0] = ac(ad[0]);
              ad[1] = ac(ad[1]);
          }
          return ad;
      }
  };
})();`;
console.log(new require("babel-minify")(content).code);

Actual Output

The console will output this:

(function(){var b=YAHOO.util,c=YAHOO.lang,e=YAHOO.env.ua,f=YAHOO.lang.trim,a=window.document,i=a.documentElement,j=e.opera,d=e.webkit,h=e.gecko,g=e.ie;b.Dom={_getXY:function(a){var d,e,f,g,h,i,c=Math.round,j="tagName",k=!1;return b.Dom._canPosition(a)&&(f=a.getBoundingClientRect(),g=a.ownerDocument,d=b.Dom.getDocumentScrollLeft(g),e=b.Dom.getDocumentScrollTop(g),k=[f.left,f.top],(h||i)&&(k[0]-=i,k[1]-=h),(e||d)&&(k[0]+=d,k[1]+=e),k[0]=j(k[0]),k[1]=j(k[1])),k}}})();

This is prettified like this (but not very pretty)

(function() {
    var b = YAHOO.util,
        c = YAHOO.lang,
        e = YAHOO.env.ua,
        f = YAHOO.lang.trim,
        a = window.document,
        i = a.documentElement,
        j = e.opera,
        d = e.webkit,
        h = e.gecko,
        g = e.ie;
    b.Dom = {
        _getXY: function(a) {
            var d, e, f, g, h, i, c = Math.round,
                j = "tagName",
                k = !1;
            return b.Dom._canPosition(a) && 
                (f = a.getBoundingClientRect(),
                g = a.ownerDocument,
                d = b.Dom.getDocumentScrollLeft(g),
                e = b.Dom.getDocumentScrollTop(g),
                k = [f.left, f.top],
                (h || i) && 
                (k[0] -= i, k[1] -= h), 
                (e || d) && 
                (k[0] += d, k[1] += e),
                k[0] = j(k[0]),
                k[1] = j(k[1])),
                k;
        }
    }
})();

Expected Output

This is my best guess what it should look like instead:

(function() {
    var b = YAHOO.util,
        c = YAHOO.lang,
        e = YAHOO.env.ua,
        f = YAHOO.lang.trim,
        a = window.document,
        i = a.documentElement,
        j = e.opera,
        d = e.webkit,
        h = e.gecko,
        g = e.ie;
    b.Dom = {
        _getXY: function(a) {
            var d, e, f, g, h, i, c = Math.round, k = !1;
            return b.Dom._canPosition(a) && 
                (f = a.getBoundingClientRect(),
                g = a.ownerDocument,
                d = b.Dom.getDocumentScrollLeft(g),
                e = b.Dom.getDocumentScrollTop(g),
                k = [f.left, f.top],
                (h || i) && 
                (k[0] -= i, k[1] -= h), 
                (e || d) && 
                (k[0] += d, k[1] += e),
                k[0] = c(k[0]),
                k[1] = c(k[1])),
                k;
        }
    }
})();

NOTE:

  1. The j variable with "tagName" is unexpected
  2. Later the js variable is used as a function which throws an exception
  3. The function should have been called on the "c" variable which is actually Math.round
  4. The example code is not meant to be complete, just a small fragment of the bigger original source file - which I would be happy to provide the original file if necessary.

Configuration

All configuration is provided above in the package.json and JS code snippet.

I'm using babel-minify to minify a JS file just as shown above, though in my example I'm reading from constant using only a small JS snippet from the bigger file that has the issue.

Possible solution

Additional context

As background, I'm trying to replace a google closure implementation that works fine with babel-minify, and mostly works fine - but this one really old JS file is not compressing correctly. I can work around the problem by making minor adjustments to the JS code being minified, which is fine; however, I'd like to know more about the problem. The example JS being minified is from YUI, and I believe the file has been prettified and then minify again - but please just ignore that.

@codefactor
Copy link
Author

Any ideas on this one? Is this the right repository for this type of issue?

I wasn't sure about it because I don't know where the actual minify mistake occurs.

At the moment our solution is to just disable minify on certain files. But this is obviously not ideal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant