Closed Goosly closed 6 years ago
I just opened this up on IE 11, and it looks like our javascript is failing to parse:
Prettifying that bit of code looks like this:
var r, a, p = "function" == typeof Map ? new Map : (r = [], a = [], {
has: function(e) {
return -1 < r.indexOf(e)
},
get: function(e) {
return a[r.indexOf(e)]
},
set: function(e, t) {
-1 === r.indexOf(e) && (r.push(e), a.push(t))
},
"delete": function(e) {
var t = r.indexOf(e); - 1 < t && (r.splice(t, 1), a.splice(t, 1))
}
}),
f = function(e) {
return new Event(e, {
bubbles: !0
})
};
try {
new Event("test")
} catch (c) {
createEvent = function(e) {
var t = document.createEvent("Event");
return t.initEvent(e, !0, !1), t
}
}
I think IE11 is actually correctly complaining here, because createEvent
is not previously defined. I found the unminified code for this in jackmoore/autoresize
, a javacript library we use (https://github.com/jackmoore/autosize/blob/6ae70cd3d28888eb858eef1167e6ed75d25dff7f/dist/autosize.js#L48-L60):
var createEvent = function createEvent(name) {
return new Event(name, { bubbles: true });
};
try {
new Event('test');
} catch (e) {
// IE does not support `new Event()`
createEvent = function createEvent(name) {
var evt = document.createEvent('Event');
evt.initEvent(name, true, false);
return evt;
};
}
You can see here that this code is totally fine! createEvent
is declared with the var
keyword, and then later is redefined in the catch
block. So, this actually feels like a minification issue! The minifier renamed createEvent
to f
above, but for some reason did not do so in the catch block.
I'm out of time for now. Currently we're using uglifier 4.1.13 (https://github.com/thewca/worldcubeassociation.org/blob/1f4b686a7e94433a21fad0c2388238e6750bf14d/WcaOnRails/Gemfile.lock#L505). I think the next step would be to figure out which version of uglifyjs it is using (and with what options), and see if we can reproduce this issue and hopefully report it upstream to uglifyjs!
I'm able to reproduce this with a fairly simple javascript file. See the following:
➜ ~/gitting/worldcubeassociation.org/WcaOnRails git:(master) ✗ bundle show uglifier
/usr/lib/ruby/gems/2.5.0/gems/uglifier-4.1.15
➜ ~/gitting/worldcubeassociation.org/WcaOnRails git:(master) ✗ cat /home/jeremy/Downloads/autosize.js
function foo() {
'use strict';
var createEvent = function createEvent(name) {
return "hiya";
};
try {
new Event('test');
} catch (e) {
createEvent = function createEvent(name) {
return "biya";
};
}
console.log(createEvent);
}
➜ ~/gitting/worldcubeassociation.org/WcaOnRails git:(master) ✗ ruby -e "require 'uglifier'; puts Uglifier.new.compile(File.read('/home/jeremy/Downloads/autosize.js'))" | npx prettier --stdin-filepath autosize.js
npx: installed 1 in 0.797s
function foo() {
"use strict";
var t = function t() {
return "hiya";
};
try {
new Event("test");
} catch (n) {
createEvent = function createEvent() {
return "biya";
};
}
console.log(t);
}
With a little investigation, I was able to distill this down into a reproducible using the uglify-js
javascript package directly:
➜ ~/gitting/worldcubeassociation.org/WcaOnRails git:(master) ✗ npx uglify-js@3.4.5 /home/jeremy/Downloads/autosize.js --ie8 --mangle | npx prettier --stdin-filepath autosize.js
npx: installed 3 in 0.821s
npx: installed 1 in 0.863s
function foo() {
"use strict";
var t = function t(t) {
return "hiya";
};
try {
new Event("test");
} catch (n) {
createEvent = function createEvent(t) {
return "biya";
};
}
console.log(t);
}
Interestingly enough, this only seems to happen with "ie8" support turned on.
I've filed https://github.com/mishoo/UglifyJS2/issues/3215 to track the underlying UglifyJS bug.
In the mean time, I suspect we could work around this by disabling ie8 support. At least that would get things working for ie11 :p
Currently, when browsing to a competition in IE 11, none of the tabs are selected by default, so the page looks empty. I would expect the "General info" to be selected by default.
Works fine in Google Chrome and used to work fine previously.