How to transpile compiled svelte with babel for safari 9

Asked By: Anonymous

Setup: webpack running svelte-loader and then babel-loader

Problem: even when other old browsers can now run the svelte code, safari 9 fails with

TypeError: type error

in the babel call to _isNativeFunction() on the HTMLElement class.


Solution

Answered By: Anonymous

It seems that svelte extends the HTMLElement class in some of its compiled code, and babel obviously will replace the extension of this class with
_wrapNativeSuper(HTMLElement) since that’s not ES5.

wrapNativeSuper is a babel method that ends up calling _isNativeFunction, and _isNativeFunction expects to be passed a function. Unfortunately, in older safari (and only in older safari), HTMLElement is not a function, and so _isNativeFunction throws this typeError even when the code is theoretically being transpiled for use with safari 9!

The hacky solution that I’ve found so far is from the following circa-2015 posts about this from the safari side of things:

https://github.com/google/traceur-compiler/issues/1709

https://github.com/babel/babel/issues/1548

Should I write v1 Custom Elements in a way that is backwards compatible with v0 API?

so it seems that this hack was kind of well known back in the day – basically just add a shim to allow HTMLElement to respond like a function:

if (typeof HTMLElement !== 'function'){
    var _HTMLElement = function(){};
    _HTMLElement.prototype = HTMLElement.prototype;
    HTMLElement = _HTMLElement;
}

I put the above code in before loading any of my frontend resources, and it worked a charm.

Further questions: Is there any danger to doing this? Is there a better way? Is this something babeljs should be taking care of as part of safari 9 support?

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno