Babel 7: Function.prototype.toString: 'this' is not a Function object

Question

I'd like to create web components that should work on ie11. I'm compiling js with gulp (and gulp-babel, that includes babel 7).

By now, when I compile with Babel, it works in Chrome, but sends an error in ie11: Function.prototype.toString: 'this' is not a Function object.

In gulpfile.js I have this:

.pipe(babel({
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "browsers": [
                    "Chrome >= 52",
                    "FireFox >= 44",
                    "Safari >= 7",
                    "Explorer 11",
                    "last 4 Edge versions"
                ]
            }
        }]
    ]
}))

In js I have something like this (sample code I found on the web for testing):

class MyCustomTag extends HTMLElement {
    connectedCallback() {
        this.innerHTML = '<h2>My custom element</h2><button>click me</button>';
        this.style.backgroundColor = 'blue';
        this.style.padding = '20 px';
        this.style.display = 'inline-block';
        this.style.color = 'white';
    }
}

try {
    customElements.define('my-custom-tag', MyCustomTag)
} catch (err) {
    const h3 = document.createElement('h3')
    h3.innerHTML = "This site uses webcomponents which don't work in all browsers! Try this site in a browser that supports them!"
    document.body.appendChild(h3)
}

Of course I added <my-custom-tag></my-custom-tag> in HTML.

The error is thrown on something generated by Babel when "extends HTMLElement" is in the code (Babel generates something like "_.isNative" that uses Function.prototype.Tostring, if I remember well - sorry I'm currently on another computer) I'm sure I'm missing something stupid, but I can't find any answer on this error. I tried adding @babel/plugin-transform-classes, babel-plugin-transform-builtin-classes, but nothing works and it drives me crazy.

Any idea?

Answer 1

I just wasted hours on the exact same issue! I first suspected Webpack of doing something strange, then I thought it was an issue with Babel, etc., etc.

Finally I figured out, that you need to load the webcomponents.js polyfill to fix this for IE11! Here is how:

npm install @webcomponents/webcomponentsjs

Then load the polyfill in the head of your HTML file:

<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

Now even IE should play nice with your web components.

Answer 2

Angular 10 with webcomponents on IE11.

For me it was the order of polyfill imports. After changing the order so that webcomponts polyfills were before core-js/es/array import the problem was gone.

The final version of polyfills.ts file:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

// if you are compiling to ES5 (check tsconfig.json) then you need this
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
// for browser not supporting custom elements
import '@webcomponents/custom-elements/custom-elements.min.js';


/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** For IE 11 */
import 'core-js/es/promise';
import 'core-js/es/string';
import 'core-js/es/map';
import 'core-js/es/set';
import 'core-js/es/array';


/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

Versions:

"@angular/core": "~10.2.4",
"@angular/elements": "^10.2.4",
"@webcomponents/custom-elements": "^1.4.3",
"@webcomponents/webcomponentsjs": "^2.5.0",