Svelte: Using Babel with Svelte breaks app on IE11, Mobile Safari 9

[arggh]

Describe the bug

Using Babel with Svelte seems to cause a bug that basically breaks the entire app with some older browsers, at least Mobile Safari 9 and IE 11.

I can replicate the same problem with Meteor's zero-config Babel-powered bundler, as well as a custom Rollup+Babel setup.

To Reproduce

• With Meteor: https://github.com/arggh/meteor-svelte-ecmascript-issue
• With Rollup: https://github.com/arggh/core-js-svelte-issue

Expected behavior
I'd expect a default Babel setup to work with Svelte and IE11, iOS 9 Safari

Stacktraces

Stack trace

[Error] TypeError: Type error toString (bundle.js:312:95) toString (bundle.js:312:95) _isNativeFunction (bundle.js:11152) _wrapNativeSuper (bundle.js:11290) _wrapNativeSuper (bundle.js:11317) (anonymous function) (bundle.js:12708) Global Code (bundle.js:12814)

Information about your Svelte project:

• Your browser and the version: IE11, Mobile Safari 9

• Svelte version 3.7.1

• Rollup, Meteor

Severity
Pretty severe, given I have to support IE 11 and iOS 9 and both are completely broken 😵

[Conduitry]

The error message I got on IE11 is "Function.prototype.toString: 'this' is not a Function object" and when I search for that, I find this SO question and this GH issue, both of which seem to be about needing to include a web components polyfill.

Edit: I wasn't able to get this to work by including a script tag pointing to the polyfill mentioned in the github issue before the script tag with bundle, but I can confirm that this is an HTMLElement when the exception is thrown.

[arggh]

@Conduitry The script tags in your linked Github issue had typos in them @@, fixing those and including both mentioned polyfills seems to fix this, at least on iPad and IE11 🎉

<script>if (this.customElements) try { customElements.define('built-in', document.createElement('p').constructor, { 'extends': 'p' }) } catch (a) { document.write('<script src="https://unpkg.com/@ungap/[email protected]/min.js" crossorigin="anonymous" ><' + '/script>') } else document.write('<script src="https://unpkg.com/[email protected]/build/document-register-element.js" crossorigin="anonymous" ><' + '/script>');</script>

<!-- On IE11, typeof HTMLElement === 'object',
    this breaks babel 7/TS compilation of built in extension
    Adding an adapter to add an intermediate constructor wrapping native HTMLElement to fix this issue
-->
<script>if (typeof HTMLElement === 'object') document.write('<script src="https://unpkg.com/custom-elements-es5-adapter@@1.0.0/custom-elements-es5-adapter.js" crossorigin="anonymous"><' + '/script>')</script>